This is because the reducer gets called immediately once we pass it to the createStore function. The initial value of the state which we passed as 0 for the createStore function is automatically passed as the value of the state parameter. The reducer function receives state and action as the parameters. Inside the reducer function, we’re logging some text to the console and then returning the value of the state from the function.
If you’re reading this, you probably understand how the promise and async/await are different in the execution context.
At all times the application is up and running, this component has to show the updated number of items in the user’s cart. In conclusion, using Redux with ReactJS brings several advantages to your application development process. It offers centralized state management, predictable state updates, efficient component communication, scalability, and benefits from a thriving ecosystem and community support.
For simple projects, such as you would do as a beginner – for example a TODO list – there isn’t a lot of state. It is absolutely sufficient to use React’s built in state management tools, and leave out Redux. I normally approach this by keeping the state in the top-level App component, and then passing props to child components to update the state. So the initialState is like an initial deposit in your Store (bank vault) and if you don’t perform any action this initialState will be returned as the state of the application. Below is the updated code in App.js with initialState in our application. Then, we create a store object by calling configureStore and passing it an object with a reducer property.
The value in the store update every time the state shows some fluctuations. The store can secure the state efficiently and holds the app state as well. This emphasizes the significance of a store enabling the users to keep their state safe and sound. For example a list of what is redux for accounts with their details, a list of transactions, and perhaps additional data coming in from the server as needed. You may have components within components within components that might want to update state relating to their grandfather components or distant cousins.
So it’ll add 1 to the previous state value which was 1, and the final state value will become 2. And inside the callback function, we’re calling the store.getState method to get the current value of the state. The above command will install the Redux library with version 4.1.0 to use in your project (which is the latest version at the time of writing this article). By the end, you’ll build skypey, a modern messaging app to bring your JS, React, and Redux skills altogether. Now, you might feel ready to begin testing the waters with Redux, but don’t get ahead of yourself.
To keep our code DRY we need to look at the new term Action Creators. When you created an account in your bank, you might have deposited some amount in your account, and if you ask the cashier for your bank balance they’ll look it up and tell it to you. In the same way, when you create a Redux Store you do a similar kind of initial deposit which is known as initialState. We will represent this initialState as a second argument passed into the createStore.
- Besides logging, it has great DevTools that allow you to time-travel actions, persist actions on page refresh, etc.
- As we can dispatch multiple actions to the reducer, we’ll use a switch statement to handle the different actions.
- To specify how the state tree is transformed by actions, you write pure reducers.