We pass the reducer function to createStore, which uses the reducer function
to generate the initial state, and to calculate any future updates. Redux can integrate with any UI framework, and is most frequently used with React. React-Redux is our official package that lets your React components interact with a Redux store by reading pieces of state and dispatching actions to update the store. In the above example, on clicking the button, we had dispatched an action with an action creator called addItemToCart(). This action creator has dispatched an action with the type ADD_ITEM_TO_CART.

In the following section, we will dive deep into the core concepts of Redux – the store, actions and reducers. What makes Redux predictable is that to make a change in the state of the application, we need to dispatch an action which describes what changes we want to make in the state. This task of handling multiple states from multiple components efficiently can become challenging when the application grows in size. Whenever a user adds an item to the cart, the application has to internally handle that action by adding that item to the cart object. It has to maintain its state internally and also show the user the total number of items in the cart in the UI.

Advantages of using Redux

Provides APIs that enable your components to interact with the Redux store, so you don’t have to write that logic yourself. You’re off to the races, building your amazing single-page-application and expanding it. Another method that we execute on the store is to dispatch an action. As the official Redux binding for React, React Redux is kept up-to-date with any API changes from either library, to ensure that your React components behave as expected.

The createStore function returns a store that we can use to manage the application data. State management is simply the management of the state of multiple user interface controls or components. As developers work on larger, more complex applications, they begin using external tools to better manage the state of their application. That was a lot to go over in very what is redux for little words, so don’t feel intimidated if you’re still not entirely sure how all the pieces fit together. Redux offers a very powerful pattern for managing application state, so it’s only natural that it takes a little practice to get used to the concepts. Depending on what the action is, reducers can choose to return a new version of their piece of state.

Step 1: How to set up the project

In this case, it’s the name of the book to be added to the cart denoted by the payload key. In Array.reduce() we returned the sum of the accumulator and current value. If you take the example of our bank scenario then after withdrawal, the money in your bank vault is no longer the same. It will be updated and again, the Cashier and Vault will remain in sync with the balance left in your account.

• In Redux, dispatch is a function provided by the store that allows you to send an action to update the state of your application.
• Then you are exporting friendsReducer as a property called friends.
• Once you have installed the needed dependencies, create a new “slice” using the createSlice function.
• The store can secure the state efficiently and holds the app state as well.
• Whether you are using hooks or class-based components, state is explicitly called out, and there are prescribed ways to get and set state.