Redux
Published: 2022-07-22 10:05:40

When most people think of Redux, they think of React. That's because Redux is most commonly used with React, but it doesn't have to be. In fact, you can use Redux with any JavaScript framework (or no framework at all). Redux is a state management library. That means it helps you manage the state of your application. 

What is state? In a React application, state is the data that your component needs in order to render. For example, if you have a component that displays a list of items, the state of that component would be the list of items.

Redux has five methods out of which four are helper utility methods - 

1) **createStore**

2) **compose**

3) **bindActionCreators**

4) **combineReducers**

5)  **applyMiddleware**

let’s discuss these methods in more detail to understand them better.

1) **createStore** - This method helps us create store. Redux is a state management library, We call the place where we keep our state the "store" the createStore() method will  create a store.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r510v6cosvc18toawro.png)

Even though the code above looks like it would work it won’t, instead it will throw a helpful error our way Error: Expected the reducer to be a function. This happens because createStore() requires a reducer to be passed in as an argument in order for it to work. So let's create a reducer and pass it into createStore().

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tbewry1h19kkkfliv00.png)

The createStore() function accepts multiple arguments such as the reducer, initial state and enhancer. But the only thing that is required for it to work is the reducer. If you don’t pass in a reducer the code will break. Redux store gives us four API’s -

a) **getState** - This returns to us the current state of the application. The current state tree of the application is equal to the last value returned by the stores reducer.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qoj7e6w1zlnqjtvqt2r.png)

b) **dispatch** - This method allows us to dispatch the actions into our reducer so that the action can take place and the state of the application can be modified.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cexvzxn029tzjrohhfj.png)

c) **subscribe** - This method accepts a function that runs every time the state in the store is updated. subscribe also returns a function that we can use to unsubscribe, this makes the subscriber null and void.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akgjtdwrvwnizhtd02gm.png)

d) **replaceReducer** - This method replaces the current reducer function with a new reducer function. Calling this function will swap out the internal reducer function reference.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/my3v3055ap4sqhkioyot.png)

2) **compose** - This method accepts multiple functions as arguments and combines it into one function. This method runs the series of functions it accepts as arguments from right to left.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6bmxxgmodda47aq78f7.png)

3) **bindActionCreators** - This method helps us take an object of action creators and wrap these action creators into a dispatch so that they can be invoked directly. Let’s see how you would normally dispatch actions without using bindActionCreators. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujzefowk8jmv5tpbp87m.png)

now lets use bindActionCreators to make our job a little easier - 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0uq20vaeuz19zdmnz2f.png)

4) **combineReducers** - As we have previously seen createStore() accepts only one reducer, we cannot pass multiple reducers in this function. But it wouldn't be logical for us to have only one reducer for our application this would make the reducer long and tedious to understand. This is where combineReducers comes in this method helps us combine multiple small reducers into one reducer that can be passed into createStore() let’s see an example to help us understand this better -

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18ys7skkak0za1u2p5d7.png)

In the above code example we can see that things get slightly complicated when we only have one reducer, now let us break this reducer down into two smaller reducers and use the combineReducers method to make a single reducer that we can pass into createStore() - 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5xhkdzroqb6dysjk3pi.png)

5) **applyMiddleware** - This method allows us to produce an enhancer out of a chain of middleware. An enhancer is a function that allows you to add extra functionality to Redux.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s45wzsi16fsht7835n56.png)

Redux is preferred over context because context is not a state management library but redux is. Incase of larger applications redux is better to use even though it takes more effort to set up, incase of small applications you can still use context.