Redux is a JS library for predictable and maintainable global state management.
By reading the above line you maybe wondering what's all this . what is this "predictable" , "maintainable" and this fancy words like global state management.
Search Redux and Redux toolkit in google you will found yourself in to two different website which are Somewhat in terms of basic definition but their use cases are same which is Redux is a independent state management library and Redux Toolkit is a package that provides a set of utilities built on top of Redux to make it easier to use and write Redux logic .
So, Hold your seat tight cause we're entering the world of javascript library called Redux.
Introducing Redux
what is Redux?
\=> It helps in managing and updating the application state . But again what do I mean by the state. In terms of vanilla javascript it is a centralized, immutable JavaScript object that holds the entire state of an application at any given moment.
So, then again we reached what do we mean by the term "centralized", "immutable" object that holds this state . if you have some previous knowledge of basic js you should already know that what are objects and what is immutability. But what do we mean by the term Centralization.
Centralization
The state is stored in a single, global object known as the store. This centralization allows all components of the application to access the same data consistently.
and
A state is a Object which contains some data in it in the form of objects which are immutable in nature and that data can be accessed by that application consistently.
Example
user: { id: 1, name: 'John Doe', loggedIn: true },
todos: [ { id: 1, text: 'Learn Redux', completed: false },
{ id: 2, text: 'Build an app', completed: true } ]
In this example, the state contains user information and a list of todos, illustrating how different pieces of data are encapsulated within the state object.
For example take a look at the legacy example given by the Redux docs.
import { createStore } from 'redux'
/**
This is a reducer - a function that takes a current state value and an
action object describing "what happened", and returns a new state value.
A reducer's function signature is: (state, action) => newState
The Redux state should contain only plain JS objects, arrays, and primitives.
The root state value is usually an object. It's important that you should
not mutate the state object, but return a new object if the state changes.
You can use any conditional logic you want in a reducer. In this example,
we use a switch statement, but it's not required.
**/
function counterReducer(state = { value: 0 }, action) {
switch (action.type) {
case 'counter/incremented':
return { value: state.value + 1 }
case 'counter/decremented':
return { value: state.value - 1 }
default:
return state
}
}
// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counterReducer)
// You can use subscribe() to update the UI in response to state changes.
// There may be additional use cases where it's helpful to subscribe as well.
store.subscribe(() => console.log(store.getState()))
// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}
A typical redux has
Store (Contains State of Our app)
Reducer (a function that takes a current state value and an action)
dispatch (is used to send actions to the store, which then triggers updates to the application state)
Redux Toolkit
Why Redux Toolkit
Short form RTK wraps core Redux package
According to Web Searches the redux Toolkit
While these were the patterns originally shown in the Redux , they unfortunately require a lot of very verbose and repetitive code. Most of this boilerplate isn't necessary to use Redux. On top of that, the boilerplate code lead to more opportunities to make mistakes.
let me give you an example. for the above line and why does it say so.
import { createSlice, configureStore } from '@reduxjs/toolkit'
const counterSlice = createSlice({
/* need three things to createSlice
1. name
2. initialState
3. reducers which are itself an object.
*/
name: 'counter',
initialState: {
value: 0
},
reducers: {
incremented: state => {
state.value += 1
},
decremented: state => {
state.value -= 1
}
}
})
export const { incremented, decremented } = counterSlice.actions
const store = configureStore({
/*
Method contains Object Doesn't accept change in valve all the time
*/
reducer: counterSlice.reducer
/*
Tell me where all the reducers are in this case the reducers are the
increment and decrement.
*/
})
// Can still subscribe to the store
store.subscribe(() => console.log(store.getState()))
// Still pass action objects to dispatch, but they're created for us
store.dispatch(incremented()) // {value: 1}
store.dispatch(incremented()) // {value: 2}
store.dispatch(decremented()) // {value: 1}
Its a bit similar to the previous code we have seen but Instead of mutating the state directly, you specify the mutations you want to happen with plain objects called actions. Then you write a special function called a reducer to decide how every action transforms the entire application's state.
In short what we see that a typical RTK has
createslice
reducers
configureStore
dispatch
Redux is a state management library for JavaScript applications. It is used to manage the state of an application, which is typically stored as objects containing immutable data. Redux ensures that this state can be accessed consistently throughout the application, making it easier to manage complex state changes and maintain a predictable state flow.The key points are:
Redux is a state management library, not a state management framework.
It is used to manage the state of a JavaScript application.
The state in Redux is typically stored as objects.
The data stored in the state objects is immutable, meaning it cannot be directly modified.
Redux ensures that the state can be accessed consistently throughout the application.
It helps manage complex state changes and maintain a predictable state flow.