React Redux - The Easiest Way

The easiest way to use redux in react is via hooks in functional components,

Will create a simple react-redux application that provides user auth available to the application and how to modify it

1) Create a new react project and install the following packages

npm install --save react react-redux

2) Creating the store, the store holds the state of the application and provides access all over the application

// src/Store.js

import { createStore } from "redux";

const Store = createStore();

export default Store;

3) Wrapping The App component or Root level component via the Provider Component from react-redux and passing down the above-created Store as a prop to it

import React, { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

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

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

4) The Reducer, now reducer is nothing but is a function that accepts two arguments and returns a modified state depending upon the arguments. The first argument is the current state of the application and the second is action, action has a type property that indicates the operation needs to be done on the state and a payload property which provides additional data required to modify the stat( not required In our case).

// src/reducer.js

const initialState = {
  auth: true
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "LOGIN":
      return { ...state, auth: true };

    case "LOGOUT":
      return { ...state, auth: false };

    default:
      return state;
  }
};

export default reducer;

5) Connecting the reducer with the store

// src/Store.js

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

const Store = createStore(reducer);

export default Store;

6) To access the state inside a component we will use useSelector hook, the useSelector hook accepts argument as a function that takes in argument i.e the state and returns the specific required state value from the state object

// src/App.js

import React from "react";
import { useSelector} from "react-redux";

export default function App() {
  const auth = useSelector((state) => state.auth);

  return (
    <div className="App">
      Is User logged in - { auth ? "True" : "False"}
    </div>
  );
}

7) To modify the state, we can use the useDispatch hook, which returns a dispatch function that can be called to modify the state

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

export default function App() {
  const auth = useSelector((state) => state.auth);
  const dispatch = useDispatch();

  const login = () => {
    dispatch({ type: "LOGIN" });
  };

  const logout = () => {
    dispatch({ type: "LOGOUT" });
  };

  return (
    <div className="App">
      Is User logged in - {auth ? "True" : "False"}
      <br />
      {auth ? (
        <button onClick={logout}>Logout</button>
      ) : (
        <button onClick={login}>LogIn</button>
      )}
    </div>
  );
}

The complete code for this application can be found at https://codesandbox.io/s/affectionate-zhukovsky-b7xmf