React — Redux workflow in 4 steps — Beginner Friendly Guide

Redux allows you to manage the state of the application via a unidirectional flow where a child component child component can directly access the state from the redux store instead of getting state changes from parent components.

I am assuming you have basic knowledge of React and an understanding of what Redux is used for. Without further ado, let’s get straight into the action.

This is an ideal react-redux app project structure.

Below is a typical workflow of a react app. We will go through each of the steps below in more detail.

React-Redux in 4 steps — Medium: @heypb , Insta: h3ypb

Let’s see how that flow will occur.

1. A user interacts with a frontend component. A prop is used to call a function which initiates an action. Actions are initiated using props as they are mapped to props in an object called mapActionsToProps ( or it can be called anything), which tells the react app which props to be used to initiate an action.

2. An action usually contains a type (or identifier) and payload (or data). It can also perform tasks such as fetching data from APIs. The code below shows what an action might look like.

actions/printHelloAction.js

3. Once an action is dispatched, it is received by a reducer. A reducer’s job is to return the changed state. Depending on the type of the action, a reducer may return an altered state of the component.

reducers/pringHelloWorldReducer.js

All reducers of a react app are combined into one single reducer which is passed as an argument to the redux store.

reducers/index.js

The redux store is provided to the react app in the root component.

src/index.js

4. The changed state is again utilized to show the updated component. The states are mapped to the props of the component, in the mapStateToProps function. The defined props in this function can be used accordingly to update the components.

So a more detailed flow may look like this,

react-redux flow

The Gitub for the above code samples can be found here, if you want to go through the code to see how it all fits together.

There are certain things that you should keep in mind while working in react-redux-

1. Reducers must be pure functions. Given any input, output must always be the same.
2. The state of your whole application is stored in an object tree within a single store.
3. State is read-only. The only way to change the state is to emit an action, an object describing what happened.
4. Changes in state are made with pure functions ( reducers).

Hope you have gained an understanding of a basic react-redux application workflow.

Cheers! Happy Day!

Feel free to add me on LinkedIn and on Instagram!

There are many important concepts that you might want to know if you want to go advance, refer the below links

uanders/react-redux-cheatsheet_React Redux Cheat Sheet on Workflow & Concept. Contribute to uanders/react-redux-cheatsheet development by creating an…_github.com

Why do we need middleware for async flow in Redux?_According to the docs, “Without middleware, Redux store only supports synchronous data flow”. I don’t understand why…_stackoverflow.com

Presentational and Container Components_You’ll find your components much easier to reuse and reason about if you divide them into two categories._medium.com

Why do we need middleware for async flow in Redux?_According to the docs, “Without middleware, Redux store only supports synchronous data flow”. I don’t understand why…_stackoverflow.com