Redux And Reduxtoolkit Tutorial

Redux Tutorial

1. Introduction to Redux

1.1 What is Redux & why Redux?

  • A small JS Library
  • for managing medium/large amount of states globally in your app.
  • useContext + useReducer Hook ideas will help you to understand redux.

1.2 Some common terms related to redux

  • React-redux: redux is used with some common packages such as react-redux
  • redux-toolkit : recommended way to write redux logic for building redux app easily and avoiding mistakes.
  • redux devtools extension: helps to debug redux app easily.

1.3 how redux works?

  • define state.
  • dispatch an Action.
  • Reducer update state based on Action Type.
  • store will update the view

2. redux core concept

  • State: consider what states you want to manage

    // define states
    count: 0;
    const initialState = { count: 0 };
    const initialState2 = { users: [{ name: "anisul islam" }] };
  • Action: actions are object that have 2 things- type & payload

    // define constants
    const INCREMENT = "INCREMENT";
    const DECREMENT = "DECREMENT";
    const ADD_USER = "ADD_USER";
    
    // dispatch(Action)
    {
      type: INCREMENT,
    }
    {
      type: DECREMENT,
    }
    {
      type: ADD_USER,
      payload: {
        name: "rafiqul islam",
      }
    }
  • Reducer: reducers are pure function which handles all logic. it updates the state depends on action type

    // crate reducer
    const counterReducer = (state = initialState, action) => {
      switch (action.type) {
        case INCREMENT:
          return {
            ...state,
            count: state.count + 1,
          };
        case DECREMENT:
          return {
            ...state,
            count: state.count - 1,
          };
    
        default:
          return state;
      }
    };
  • Store: It holds the states. It has 3 important methods- getState(), dispatch(), suscribe()

    // 4. store - getState(), dispatch(), subscribe()
    
    // create store
    const store = createStore(counterReducer);
    
    store.subscribe(() => {
      console.log(store.getState());
    });
    
    // dispatch action
    store.dispatch(incrementCounter());
    store.dispatch(incrementCounter());
    store.dispatch(incrementCounter());
    store.dispatch(decrementCounter());

3. Complete Counter App

  • example of counter app

    const { createStore } = require("redux");
    
    const INCREMENT = "INCREMENT";
    const DECREMENT = "DECREMENT";
    const RESET = "RESET";
    
    const initialCounterState = {
      count: 0,
    };
    
    const incrementCounter = () => {
      return {
        type: INCREMENT,
      };
    };
    const decrementCounter = () => {
      return {
        type: DECREMENT,
      };
    };
    const resetCounter = () => {
      return {
        type: RESET,
      };
    };
    
    const counterReducer = (state = initialCounterState, action) => {
      switch (action.type) {
        case INCREMENT:
          return {
            ...state,
            count: state.count + 1,
          };
        case DECREMENT:
          return {
            ...state,
            count: state.count - 1,
          };
        case RESET:
          return {
            ...state,
            count: 0,
          };
    
        default:
          state;
      }
    };
    
    const store = createStore(counterReducer);
    
    store.subscribe(() => {
      console.log(store.getState());
    });
    
    store.dispatch(incrementCounter());
    store.dispatch(incrementCounter());
    store.dispatch(decrementCounter());
    store.dispatch(resetCounter());

4. payload in action

  • example

    const { createStore } = require("redux");
    
    const GET_PRODUCTS = "GET_PRODUCTS";
    const ADD_PRODUCTS = "ADD_PRODUCTS";
    
    const initialProductState = {
      products: ["sugar", "salt"],
      numberOfProducts: 2,
    };
    
    const getProductAction = () => {
      return {
        type: GET_PRODUCTS,
      };
    };
    const addProductAction = (product) => {
      return {
        type: ADD_PRODUCTS,
        payload: product,
      };
    };
    
    const productsReducer = (state = initialProductState, action) => {
      switch (action.type) {
        case GET_PRODUCTS:
          return {
            ...state,
          };
        case ADD_PRODUCTS:
          return {
            products: [...state.products, action.payload],
            numberOfProducts: state.numberOfProducts + 1,
          };
    
        default:
          return state;
      }
    };
    
    const store = createStore(productsReducer);
    
    store.subscribe(() => {
      console.log(store.getState());
    });
    
    store.dispatch(getProductAction());
    store.dispatch(addProductAction("pen"));
    store.dispatch(addProductAction("pencil"));

5. Multiple reducers & combine multiple reducers

  • example

    const { createStore, combineReducers } = require("redux");
    
    // product constants
    const GET_PRODUCTS = "GET_PRODUCTS";
    const ADD_PRODUCTS = "ADD_PRODUCTS";
    
    // cart constants
    const GET_CART_ITEMS = "GET_CART_ITEMS";
    const ADD_CART_ITEMS = "ADD_CART_ITEMS";
    
    // product states
    const initialProductState = {
      products: ["sugar", "salt"],
      numberOfProducts: 2,
    };
    
    // cart states
    const initialCartState = {
      cart: ["sugar"],
      numberOfProducts: 1,
    };
    
    // product actions
    const getProductAction = () => {
      return {
        type: GET_PRODUCTS,
      };
    };
    const addProductAction = (product) => {
      return {
        type: ADD_PRODUCTS,
        payload: product,
      };
    };
    
    // cart actions
    const getCartAction = () => {
      return {
        type: GET_CART_ITEMS,
      };
    };
    const addCartAction = (product) => {
      return {
        type: ADD_CART_ITEMS,
        payload: product,
      };
    };
    
    const productsReducer = (state = initialProductState, action) => {
      switch (action.type) {
        case GET_PRODUCTS:
          return {
            ...state,
          };
        case ADD_PRODUCTS:
          return {
            products: [...state.products, action.payload],
            numberOfProducts: state.numberOfProducts + 1,
          };
    
        default:
          return state;
      }
    };
    
    const cartReducer = (state = initialCartState, action) => {
      switch (action.type) {
        case GET_CART_ITEMS:
          return {
            ...state,
          };
        case ADD_CART_ITEMS:
          return {
            cart: [...state.cart, action.payload],
            numberOfProducts: state.numberOfProducts + 1,
          };
    
        default:
          return state;
      }
    };
    
    const rootReduer = combineReducers({
      productR: productsReducer,
      cartR: cartReducer,
    });
    
    const store = createStore(rootReduer);
    
    store.subscribe(() => {
      console.log(store.getState());
    });
    
    store.dispatch(getProductAction());
    store.dispatch(addProductAction("pen"));
    store.dispatch(getCartAction());
    store.dispatch(addCartAction("salt"));

6. Middleware

  • for extra features, middlepoint of dispatching an action and handledby reducer, performing async tasks, login etc.

  • Example of popular redux middlewares packages: redux-logger, redux-thunk

  • npm install redux-logger

  • example

    const { createStore, combineReducers, applyMiddleware } = require("redux");
    const { default: logger } = require("redux-logger");
    
    // product constants
    const GET_PRODUCTS = "GET_PRODUCTS";
    const ADD_PRODUCTS = "ADD_PRODUCTS";
    
    // product states
    const initialProductState = {
      products: ["sugar", "salt"],
      numberOfProducts: 2,
    };
    
    // product actions
    const getProductAction = () => {
      return {
        type: GET_PRODUCTS,
      };
    };
    const addProductAction = (product) => {
      return {
        type: ADD_PRODUCTS,
        payload: product,
      };
    };
    
    const productsReducer = (state = initialProductState, action) => {
      switch (action.type) {
        case GET_PRODUCTS:
          return {
            ...state,
          };
        case ADD_PRODUCTS:
          return {
            products: [...state.products, action.payload],
            numberOfProducts: state.numberOfProducts + 1,
          };
    
        default:
          return state;
      }
    };
    
    const store = createStore(productsReducer, applyMiddleware(logger));
    
    store.subscribe(() => {
      console.log(store.getState());
    });
    
    store.dispatch(getProductAction());
    store.dispatch(addProductAction("pen"));

7. API Calling – async actions using redux-thunk

  • example

    // async actions - api calling
    // api url - https://jsonplaceholder.typicode.com/todos
    // middleware- redux-thunk
    // axios api
    
    const { default: axios } = require("axios");
    const { createStore, applyMiddleware } = require("redux");
    const reduxThunk = require("redux-thunk").default;
    
    // define constants
    const GET_TODOS_REQUEST = "GET_TODOS_REQUEST";
    const GET_TODOS_SUCCESS = "GET_TODOS_SUCCESS";
    const GET_TODOS_FAILED = "GET_TODOS_FAILED";
    const TODOS_URL = "https://jsonplaceholder.typicode.com/todos";
    
    // define state
    const initialTodosState = {
      todos: [],
      isLoading: false,
      error: null,
    };
    
    const getTodosRequest = () => {
      return {
        type: GET_TODOS_REQUEST,
      };
    };
    
    const getTodosSuccess = (todos) => {
      return {
        type: GET_TODOS_SUCCESS,
        payload: todos,
      };
    };
    const getTodosFailed = (error) => {
      return {
        type: GET_TODOS_FAILED,
        payload: error,
      };
    };
    
    const todosReducer = (state = initialTodosState, action) => {
      switch (action.type) {
        case GET_TODOS_REQUEST:
          return {
            ...state,
            isLoading: true,
          };
        case GET_TODOS_SUCCESS:
          return {
            ...state,
            todos: action.payload,
            isLoading: false,
          };
        case GET_TODOS_FAILED:
          return {
            ...state,
            isLoading: false,
            error: action.payload,
          };
    
        default:
          state;
      }
    };
    
    // async action creator
    // thunk-middleware allows us to return a function isntead of obejct
    const fetchData = () => {
      return (dispatch) => {
        dispatch(getTodosRequest());
        axios
          .get(TODOS_URL)
          .then((res) => {
            const todos = res.data;
            const titles = todos.map((todo) => todo.title);
            dispatch(getTodosSuccess(titles));
          })
          .catch((err) => {
            const error = err.message;
            dispatch(getTodosFailed(error));
          });
      };
    };
    
    const store = createStore(todosReducer, applyMiddleware(reduxThunk));
    
    store.subscribe(() => {
      console.log(store.getState());
    });
    
    store.dispatch(fetchData());

    8. React-redux counter example

    • install redux and react-redux package
    • we will make a counter app; first we will build with state and then we will do this with react-redux. example

         // App.js
         import React, { useState } from "react";
      
         // state - count:0
         // action - increment, decrement, reset
         /*
         reducer - handle logic for state update
          count => count + 1
          count => count - 1
          count => 0
         */
      
         const App = () => {
           const [count, setCount] = useState(0);
      
           const handleIncrement = () => {
             setCount((count) => count + 1);
           };
      
           const handleReset = () => {
             setCount(0);
           };
      
           const handleDecrement = () => {
             setCount((count) => count - 1);
           };
      
           return (
             <div>
               <h1>React Redux Example</h1>
               <h2>Count : {count}</h2>
               <button onClick={handleIncrement}>Increment</button>
               <button onClick={handleReset}>Reset</button>
               <button onClick={handleDecrement}>Decrement</button>
             </div>
           );
         };
      
         export default App;
         
  • now we will make the same counter app using react-redux

      // step 1: create constants
      //services/constants/counterConstants.js
        export const INCREMENT = "INCREMENT";
        export const RESET = "RESET";
        export const DECREMENT = "DECREMENT";
    
      // step 2: create actions 
      //services/actions/counterActions.js
      // action - increment, decrement, reset
    
        import { DECREMENT, INCREMENT, RESET } from "../constants/counterConstants";
    
        export const incrementCounter = () => {
          return {
            type: INCREMENT,
          };
        };
    
        export const resetCounter = () => {
          return {
            type: RESET,
          };
        };
    
        export const decrementCounter = () => {
          return {
            type: DECREMENT,
          };
        };
        
        
        // step 3: create reducers 
        //services/reducers/counterReducer.js
            /*
          reducer - handle logic for state update
           count => count + 1
           count => count - 1
           count => 0
          */
          import { DECREMENT, INCREMENT, RESET } from "../constants/counterConstants";
    
          const initialState = { count: 0 };
    
          const counterReducer = (state = initialState, action) => {
            switch (action.type) {
              case INCREMENT:
                return {
                  ...state,
                  count: state.count + 1,
                };
              case RESET:
                return {
                  ...state,
                  count: 0,
                };
              case DECREMENT:
                return {
                  ...state,
                  count: state.count - 1,
                };
    
              default:
                return state;
            }
          };
    
          export default counterReducer;
    
        // step 4: create store
        // npm install redux
        // src/store.js
            import { createStore } from "redux";
            import counterReducer from "./services/reducers/counterReducer";
            const store = createStore(counterReducer);
            export default store;
            
         // step 5: provide store in index.js
         // npm install react-redux
            import React from "react";
            import { createRoot } from "react-dom/client";
            import { Provider } from "react-redux";
    
            import App from "./App";
            import store from "./store";
    
            const container = document.getElementById("root");
            const root = createRoot(container);
    
            root.render(
              <Provider store={store}>
                <App />
              </Provider>
            );
    
          // step 6: use store in anywhere in your app. for example in Counter.js
          import React from "react";
          import { useDispatch, useSelector } from "react-redux";
          import {
            incrementCounter,
            decrementCounter,
            resetCounter,
          } from "./services/actions/counterAction";
    
          const Counter = () => {
            const count = useSelector((state) => state.count);
            const dispatch = useDispatch();
    
            const handleIncrement = () => {
              dispatch(incrementCounter());
            };
    
            const handleReset = () => {
              dispatch(resetCounter());
            };
    
            const handleDecrement = () => {
              dispatch(decrementCounter());
            };
    
            return (
              <div>
                <h1>React Redux Example</h1>
                <h2>Count : {count}</h2>
                <button onClick={handleIncrement}>Increment</button>
                <button onClick={handleReset}>Reset</button>
                <button onClick={handleDecrement}>Decrement</button>
              </div>
            );
          };
    
          export default Counter;
    
          // create actions & constants
          // create reducers
          // create & provide store
          // useSelector, useDispatch

GitHub

View Github