Redux got popular very quickly because of its simplicity, small size (only 2 KB) and great documentation. If you want to learn how Redux works internally and dive deep into the library, consider checking out Dan’s free course. Redux was inspired by Flux, and Flux is a “way of organizing things” created by Facebook to handle state large complex applications, like Facebook. If you want to learn more about why Facebook came up with Flux, watch this video. In short – they had a lot of bugs, and they were fed up playing whack-a-mole trying to fix them, and so were their users. You don’t want to find out later that it increases in size and you have to rewrite it from Context to Redux.
It becomes difficult to manage the state of each component in the application when the size of the application becomes huge. It helps in updating and maintaining the state of each component in the application. Then, we create a store object by calling configureStore and passing it an object with a reducer property. The reducer property is an object that maps reducer slice names to their corresponding reducer functions. In this case, we have one reducer slice called todo, and its corresponding reducer function is todoReducer. And finally, the todoSlice.reducer function handles all actions automatically generated based on the reducer objects provided to the createSlice function.
Server-side rendering
Internal actions are simple JavaScript objects that have a type property (usually constant), describing the type of action and payload of information being sent to the store. For example a list of accounts with their details, a list of transactions, and perhaps additional data coming in from the server as needed. You why redux may have components within components within components that might want to update state relating to their grandfather components or distant cousins. This gets pretty messy and the potential in teams for misunderstandings and mistakes, and it is the justification for using a state management library like Redux.
The only requirement of an action object is having a type property, whose value is usually a string. The third and final new import in the index.js file above is the user reducer, which is vitally important to the operation of your Redux store. There’s a lot to unpack in the code above, but the best place to start is with the configureStore function. Immediately you’ll start to see the benefits of installing the Redux Toolkit library as the configureStore function creates the Redux store with just three lines of code. Though Redux is an independent state management library, using it with any front-end framework or library requires a UI binding library. A UI binding library handles the state container (or store) interaction logic, which is a set of predefined steps that connects a front-end framework to the Redux library.
Using react-intersection-observer to create a dynamic header
In the case of addTodo, the type property is set to «ADD_TASK», indicating that a new task has been added. The payload property contains an object with the new task’s id and text values. The id is generated using the new Date().getTime() method creates a unique identifier based on the current timestamp.
The createStore function returns a store that we can use to manage the application data. Sometimes the logic of updating data in an app can be fairly complex. It might involve multiple steps that depend on one another. We may need to wait for the responses from multiple servers before updating the application state.
Clicking on the «State» tab within the Redux DevTools will show you the entire state of your Redux store and any actions that have been dispatched and their payloads. Finally, we export the store so we can use it in our application. The Redux store is like a giant container that holds all the data for your application. In addition to the type, we can also pass extra information as a part of the action. As you can see, for every action dispatched to the store, the store gets changed. So we’re able to see the different values of the state in the console.