React-redux

Table of Contents

Installation

npm i react react-redux

yarn add react react-redux

Note:- Using react-redux in this way is no longer the recommended way and is depricated. Consider using react-redux with react-toolkit

4 step Setup

Document structure

└── src
    └── redux
        ├── action
        │   └── index.ts
        ├── reducers
        │   ├── index.ts
        │   └── upDown.ts
        ├── hooks.ts
        └── store.ts

Add action

// redux/action/index.js
export const incNumber = () => {
  return {
    type: "INCREMENT",
  };
};

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

Add reducers

// redux/reducers/upDown.js
const initialState = 0;

const changeTheNumber = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};

export default changeTheNumber;

// redux/reducers/index.js
import { combineReducers } from "redux";
import changeTheNumber from "./upDown";

const rootReducer = combineReducers({
  changeTheNumber,
});

export default rootReducer;

Optional hooks file

If using typescript only then this hooks file is needed else useDispatch and useSelector can be directly imported and used

import store from "./store";
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";

type AppDispatch = typeof store.dispatch;
type RootState = ReturnType<typeof store.getState>;

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Add provider to main.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { Provider } from "react-redux";
import store from "./redux/store";

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

And finally use

//app.ts
import { useAppDispatch, useAppSelector } from "./redux/hooks";
import { incNumber, decNumber } from "./redux/action";

const count = useAppSelector(state => state.changeTheNumber);
const dispatch = useAppDispatch();

// dispatch(incNumber())
// dispatch(decNumber())

//app.js
import { useDispatch, useSelector } from "react-redux";
import { incNumber, decNumber } from "./redux/action";

const count = useSelector(state => state.changeTheNumber);
const dispatch = useDispatch();

// dispatch(incNumber())
// dispatch(decNumber())