Advanced Coding & Software Engineering Program

how to implement React Redux in react App :

Step 1: Create React App.

Step 2: App.js

import logo from "./logo.svg";
import "./App.css";
import { useSelector, useDispatch } from "react-redux"

function App() {
  const num = useSelector((statedata) => statedata)
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1>Redux : {num}</h1>

      <button onClick={(e) => dispatch({ type: "INCREMENT" })}>
        Increment
      </button>

      <button onClick={(e) => dispatch({ type: "DECREMENT" })}>
        Decrement
      </button>
    </div>
  );
}

export default App;

Step 3: reducer.js

const counterReducer = (state = 0, action) => {
    switch (action.type) {
        case "INCREMENT":
            return state + 1
        case "DECREMENT":
            return state - 1
        default:
            return state
    }
}
export default counterReducer

Step 4: index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { createStore } from "redux"
import counterReducer from "./reducer";
import {Provider} from "react-redux"
const store = createStore(counterReducer)
//console.log(store);
//console.log(store.getState())  // 0
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
  <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

with Folder structure

step 1 create a folder named as "redux"

step 2: create 3 JS file 

action.js, reducer.js , store.js

now App.js

import "./App.css";
import { useDispatch, useSelector } from "react-redux";
import { increment, decrement } from "./redux/action";


function App() {
  const counter = useSelector((state) => state.count);
  const dispatch = useDispatch();
  const handleIncrement = () => {
    dispatch(increment(1));
  };

  const handleDecrement = () => {
    dispatch(decrement(1));
  };

  return (
    <div className="App">
      <h1>Counter {counter} </h1>
      <button onClick={() => handleIncrement()}>+</button>
      <button onClick={() => handleDecrement()}>-</button>

    </div>
  );
}

export default App;

action.js

export const increment = (number) => {
    return {
      type: "INCREMENT",
      payload: number
    };
  };
  export const decrement = (number) => {
    return {
      type: "DECREMENT",
      payload: number
    };
  };

reducer.js

const initialState = {
    count: 0,
  };
  
  export const counterReducer = (state = initialState, action) => {  
    switch (action.type) {
      case "INCREMENT":
        return {
          ...state,
          count: state.count + action.payload
        };
    }
    switch (action.type) {
      case "DECREMENT":
        return {
          ...state,
          count: state.count - action.payload
        };
      default:
        return state;
    }
  };

store.js

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

const store = createStore(
counterReducer
 );
export default store;

index.js

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();