*Upcoming Changes

• Redux Toolkit (Added Soon)

react-redux-example

Example how to use Redux with React

Please Checkout the website : https://run-your-command.github.io/react-redux-example/

Content

• Overview
• Action
• Reducer
• Store
• Connect React with Redux
• Author

Overview

Using NPM

  npm i redux react-redux

Using Yarn

  yarn add redux react-redux

You can easily understand Redux ↓

If you have to add redux with your existing project then you have to create some file please refer the REdux DOC and see the below example to understand the same

• Action what to do?
• Reducer how to do?
• Store centralised store
• Connect React with Redux main function to connect redux with react

Action

First, We have to create action for the reducer means what to do?

So create file call actions and store the function which take the action type ↓

Increment ↓

export const incNumber = () => {
  return {
    type: "INCREMENT",
  };
};

Decrement ↓

export const decNumber = () => {
  return {
    type: "DECREMENT",
  };
};

Clear ↓

export const clearNumber = () => {
  return {
    type: "CLEAR_ALL",
  };
};

Reducer

We created our actions now we have to create our reducer which tell how to do?

So create one file for the reducer with the help of Switch or If initialise with the initial store and assign the action type ↓

Main Reducer

For different cases you may create many reducer

But you have to create one main file which call main reducer or anything and combined all reducer you create ↓

import actionCombined from "./Reducer";
import { combineReducers } from "redux";

const mainReducer = combineReducers({ actionCombined }); // ← add all reducer

export default mainReducer;

Store

Now you have create your action and reducer it’s time to create centralised store and connect with your main reducer ↓

import mainReducer from "./reducer";
import { createStore } from "redux";

const store = createStore(mainReducer);

Connect React with Redux

Finally you have successfully created your action reducer and store now it’s time to connect your redux with your react project.

But first you have to use two important hooks which helps to get the Store state and assign the action ↓

• useSelector
• useDispatch

import { useSelector, useDispatch } from "react-redux";

useSelector

Using useSelector you can call current state example below ↓

const getState = useSelector((state) => state.actionCombined);

console.log(getState); // ← print the state and check

// Example ↓
<h1>Hi, There {getName}!</h1>;

useDispatch

Using useDispatch you can dispatch your action ↓

const dispatch = useDispatch();

// Example ↓

<button
  className="box-add"
  onClick={() => {
    dispatch(incNumber()); // ← here we add the action INCREMENT
  }}
>
  +
</button>;

Provider..

Wow we can say now we have successfully connect the redux with our react project but wait a second 🤔

Did we assign the store to our main component 🧐

No. we have to provide our store to index.js using <Provider> and then we can easily access the store where we want ↓

Code Snippet

import store from "./lib/Store";
import { Provider } from "react-redux";

// ↓ here we easily share the store with our main component using Provider.....

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

Author

Thank You All 🙏🏻

Made with 🖤 by

Author : Rishu Chowdhary

Email : hi.10rishu@gmail.com