How to use redux in reactJS project? An easy way for state management using react-redux in ReactJS application.

In this article, we will understand

1. How to use redux in reactJS
2. Why redux is the best choice for react application state management
3. How to configure react-redux for state management in our react applications, lets get started…

When and Why Redux for the state management?

As we know, React takes care of updating the UI in response to the source of the truth, React state model works well when the state is hierarchical and more or less matches the component structure so, in this way state gets spread out across all the components.

However, sometimes distant part of the components(leaf) wants to have access to the same state. for example, Assume we cached some fetched data and want to update consistently data everywhere at the same time, in this case, if you follow the react state model and, You will end up with large components at the top of the component tree that passes myriad props through some intermediate components even if they don’t use them the props data, just to reach a few leaf component that actually cares about data.

when you find yourself in this situation you can use Redux to “extract” the state management logic from top-level components to separate functions called reducers and connect the leaf components that care about the state directly to it, instead of passing the props throughout whole the app components. If you don’t have this problem yet in your app, you probably don’t need Redux.

In short, I use Redux state management for the following reasons:

• Reduce and manage complexity when the app is scaling.
• Ensure same state to be shared among multiples React components.
• Reduce the number of props being passed throughout the multiple levels of components.
• Prevent using setState a lot, which can damage your component performance.

Now In this document, we’ll walk you through the thought process of building a “project name” using React-redux.

Part 1 : Setup redux configuration to the App

Step 1: Create React App and install the redux node dependencies

Open your favorite editor and copy and paste the below command to create a new quick start react application, for the demo purpose I use Visual studio code to create a new project of name “My-app” by executing the following command in the terminal.  Before this make sure that you have the latest version of node installed in your machine.

npx create-react-app my-app

After All the packages are installed, use the below command to run the project, the first command is that set up the terminal to the “project source directory”( my-app ), and the second command is to run the app is just to make sure the reactJs project is successfully created or not.

 cd my-app npm start

Step 2: Install “redux” and “react-redux” dependencies

Hit ctrl+ c if the project’s development server is already running, and execute the following commands again in the terminal window to set up the react-redux our application.

Terminate server

  npm install redux react-redux

Make sure the above packages are successfully installed or not by opening the package.json file.

Step 3: Create a store file and confirm the configuration

create a file named ConfigureStore.js inside the ./src/store directory. we use the createStore() function from redux, to create a store. We can see that we have created the reducer function. will understand in the next article what are all these concepts.

CreateStore:- Redux CreateStore is a function that takes 3 arguments reducer,preloadedState, enhancer.

store: The store gives you an object; we need to learn 3 APIs here, objects/functions/ APIs, we return the initial object will understand it when we launch the application.

We will learn about this in the next part of the article by creating practical components.

Step 4: Setup Redux Store in the index.js file

The final step is very much important because It’s the topmost component of the react project hierarchy applying this change to the index.js ensures that our redux store is available to all of the components. We can achieve this using Provider API component.

Now It’s time to launch the application and see what store.getState() returns, now run the application by executing the following command in the terminal.

npm start

As you can see, the initial react state is logged in the chrome’s console window. in the next article, we explore more on this object and work on this, Thank you, Happy coding…

Conclusion

In this article we learned how to set a reactive-redux configuration to achieve state management for our application, I hope you find them helpful. In the following article, we apply the concept of “redux state management” in our project and gain practical knowledge on when and how to use redux.