To understand what this means, lets break it down into three parts.
2.It is a state container.
3.It is predictable.
Let's take a look at these parts individually.
Redux stores the state of your application.
But what exactly do we mean by state of an application? Well consider a react app, we all learned about state of the component for example if we have a login form the state of the component is simply an object that holds user name password and a submitting flag to indicate the submit action happening in the background.
Or if we had a list of users to display the state of the component would be an object that contains an array of users.
For example: In todo list app -- item(pending) -> item(completed)
In Redux, all state transitions are explicit and it is possible to keep track of them. In other words, the changes of your application's state become predictable.
Component in react have their own state. Why do we need another tool to help manage state?
React is generally fast, but by default any updates to a component will cause React to re-render all of the components inside that part of the component tree. This does require work, and if the data for a given component hasn't changed, then re-rendering is likely some wasted effort because the requested UI output would be the same.
If performance is a concern, the best way to improve performance is to skip unnecessary re-renders, so that components only re-render when their data has actually changed. React Redux implements many performance optimizations internally, so that your own component only re-renders when it actually needs to.
In addition, by connecting multiple components in your React component tree, you can ensure that each connected component only extracts the specific pieces of data from the store state that are needed by that component. This means that your own component will need to re-render less often, because most of the time those specific pieces of data haven't changed.
Create react application using:
Next we install the two require packages i.e, redux and react-redux.
Now we will create component folder in src folder, inside component we will create CakeContainer.js file.
After including CakeContainer component in App.js, let's define Actions and Action Creators.
Here, we will create cakeAction.js file and inside this file we will create a function called buyCake that returns an Action.
Action is a object with a type property and Action creator is a function(here: buyCake) that returns a object.
Next we are going to implement Reducer.
We know that a reducer is a function that accepts state and action as parameters and returns the new state.
Create Redux Store(state) and provide it our React application.
Lets create store.js file and within this file we create our store for which we use createStore method from redux.
At last, In app.js import Provider from react-redux and wrap the div tag in the return statement with this provider component
and for provider component to know our redux store we specify it as a prop.
That's all, I hope you found this article helpful.🙂