How to Learn React-Redux

Basic Redux Flow chart

When an action is dispatched, the Redux store calls the reducer function with the current state and the dispatched action. The reducer function returns a new state, and the store state is updated. This triggers a re-render of the React components, and the data flows through the app.

Folder Structure

This is a simple way to create redux folder structure in your react project.

Some Step to Implement Redux in Your React Project

1. Install Redux/Toolkit and React-Redux:

Above this two commend you can easily import redux toolkit as well as react-redux library.

2. Create a Redux Store:

Here you require configureStore file from @reduxjs/toolkit for create your store.

3. Create a Reducer:

You can see in image where defined a examplereducer function. the Reducer function every time get two parameter state and action.

you can get your data in the data parameter that you initialize in initalstate object.

4. Create a Action:

In Action you dispatch your action and type.

5. Provide the Store to React:

Wrap your application in the Provider component from react-redux and pass the store to it.