Applying Redux into React

Overview

Redux is a powerful integrated framework for React apps to manage their state effectively. We already knew how helpful Redux brings to the big React apps, What Redux do to manage state in React (refer to my blog “Introduction to Redux for React”). In this blog, I am going to introduce step by step for applying Redux into a React app. We will create a react app and discuss how we can integrate Redux into it.

Introduce “HOME INVENTORY” web app

“HOME INVENTORY” app is one of the web applications I made in Web Application Programming in my 3rd semester. It was built in Java with servlet and JSP, and I will convert it into a React app in this blog.

Login Page
“Inventory” component rendered after Menu

Setup Redux

1. Understand the states of the app

Our UI components are created but they don’t render any data, such as Inventory and Users. In order for our components to render these kinds of data, they should be a state because the UI will be rendered each time data changed such as when adding a new user or deleting a user, the table of users should be rendered with the new change.

2. Set up Redux for Category

In this app, we don’t need to manage categories, they are used for only showing as options for input in the Inventory components. Therefore, we create only Reducer for Category.

3. Set up Redux for User

First, we should identify Actions for Users. This app requires features for adding, editing, and deleting a user, so certainly we have to create these 3 actions. We should pass a user as a payload for these actions.

User Reducer

4. Set up Redux for Inventory Item

For the Inventory page, we need 2 features for adding and deleting items, so there are only two actions for Items.

Use Store and Dispatch in the components

1. Get authentication from Store in the User reducer

First, the App component (the component wrap entire the app) needs to be added mapStateToProps for getting the currently logged-in user in Store. If this state is not null, it will render the main page component, otherwise, the login component rendered. In the mapStateToProps, the prop of this component will be mapped with the “auth” state stored in the User reducer.

2. Send dispatch to update the currently logged-in user in the User reducer

In the login component, we will use dispatch to send the “Login” action to the User reducer to validate the username and password for login. We should use mapDispatchToProps in order to map props of this component to calls of dispatch we defined.

3. Send dispatch to set the logged-in user to null for logout

On the main page, we need to handle the log out in the menu. When clicking on this link, it will send a “Logout” action to the User reducer. In the User reducer we set up above, this action is defined to set a null to the currently logged-in user.

4. Use Store and Dispatch in User component

On User page, we need to access to Store to get all users, so we have to use mapStateToProps for this and map with the props. Also, we need to handle add, edit and delete users, we also need mapDispatchToProps to send appropriate actions for handling these events.

5. Use Store and Dispatch in Inventory component

Similar to the User component, we need to get all Items and handle add, delete items. We need both mapStateToProps and mapDispatchToProps. Besides that, we also need to get the sequenceId in Store for generating the id for new items. Also, inventory items need to refer to the user that is the owner, so mapStateToProps has to have a prop map with the currently logged-in user. Lastly, in order to display categories as options for input, we also need to map a prop with the categories stored in Redux.

Conclusion

Now we have a complete Redux React app. Although the setup is the most struggling part in Redux, it’s helpful for managing state when your app is getting bigger. This blog is not showing all steps for setting up or using Store and Dispatch, but we know when building a Redux, we can decide which state should be managed by Redux. And we know how to use Redux basically in a React app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store