How to Learn React-Redux

react redux features image

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.

flow chart of redux

Folder Structure

redux 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:

redux and react command

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.

redux store

3. Create a Reducer:

redux 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:

redux 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.

redux provider

© Copyright 2024 - Beact Infotech. All Rights Reserved