Redux

A summary of redux library

This blog gives a summary of how to implement redux, while highlighting important components of redux library.

Redux: The Basics

Redux consist of actions, reducers, object of inital state and central store.

store.ts

const redux = require("redux");
 
// Action Creators
function increment() {
  return {
    type: "INCREMENT",
  };
}
 
function decrement() {
  return {
    type: "DECREMENT",
  };
}
 
// Reducer: The decision maker
function reducer(state = { count: 0 }, action) {
  // return new state based on the incoming action.type
  switch (action.type) {
    case "INCREMENT":
      return {
        count: state.count + 1,
      };
    case "DECREMENT":
      return {
        count: state.count - 1,
      };
    default:
      return state;
  }
}
 
// Central store
const store = redux.createStore(reducer);
 
// Subscribing store
store.subscribe(() => {
  console.log(store.getState());
});
 
// Dispatching Actions: Intializing state change
store.dispatch(increment()); // {count: 1}
store.dispatch({ type: "WEIRD" }); // {count: 1} as type is not valid type and reducer is default

Redux: With more Complex state

Using redux to manage more complex state.

store.ts

const redux = require("redux");
 
// Action Creators
function changeCount(amount = 1) {
  return {
    type: "CHANGE_COUNT",
    payload: amount,
  };
}
 
function addFavoriteThing(thing) {
  return {
    type: "ADD_FAVORITE_THING",
    payload: thing,
  };
}
 
function removeFavoriteThing(thing) {
  return {
    type: "REMOVE_FAVORITE_THING",
    payload: thing,
  };
}
 
function setYouTubeTitle(title) {
  return {
    type: "SET_YOUTUBE_TITLE",
    payload: title,
  };
}
 
function upvoteVideo() {
  return {
    type: "UPVOTE_VIDEO",
  };
}
 
// Initial store
const initialState = {
  count: 0,
  favoriteThings: [],
  youtubeVideo: {
    title: "",
    viewCount: 0,
    votes: {
      up: 0,
      down: 0,
    },
  },
};
 
// Console-log: Initial Store
console.log(initialState);
 
function reducer(state = initialState, action) {
  switch (action.type) {
    case "CHANGE_COUNT":
      return {
        ...state,
        count: state.count + action.payload,
      };
    case "ADD_FAVORITE_THING":
      return {
        ...state,
        favoriteThings: [...state.favoriteThings, action.payload],
      };
    case "REMOVE_FAVORITE_THING": {
      const updatedArr = state.favoriteThings.filter(
        (thing) => thing.toLowerCase() !== action.payload.toLowerCase()
      );
      return {
        ...state,
        favoriteThings: updatedArr,
      };
    }
    case "SET_YOUTUBE_TITLE":
      return {
        ...state,
        youtubeVideo: {
          ...state.youtubeVideo,
          title: action.payload,
        },
      };
    case "UPVOTE_VIDEO":
      return {
        ...state,
        youtubeVideo: {
          ...state.youtubeVideo,
          votes: {
            ...state.youtubeVideo.votes,
            up: state.youtubeVideo.votes.up + 1,
          },
        },
      };
    default:
      return state;
  }
}
 
const store = redux.createStore(reducer);
 
// Subscribing Store
store.subscribe(() => {
  console.log(store.getState());
});
 
// Dispatch: To initiate state change
store.dispatch(setYouTubeTitle("Learn Redux"));
store.dispatch(upvoteVideo());

Redux: With Combined reducers

When initial state gets complex, the reducers can get more complex. To handle this complexity, reducers can be broken down into individual reducers to cater specific sections of the store.

count.js

export function changeCount(amount = 1) {
  return {
    type: "CHANGE_COUNT",
    payload: amount,
  };
}
 
export default function countReducer(count = 0, action) {
  switch (action.type) {
    case "CHANGE_COUNT":
      return count + action.payload;
    default:
      return count;
  }
}

favoriteThings.js

export function addFavoriteThing(thing) {
  return {
    type: "ADD_FAVORITE_THING",
    payload: thing,
  };
}
 
export function removeFavoriteThing(thing) {
  return {
    type: "REMOVE_FAVORITE_THING",
    payload: thing,
  };
}
 
export default function favoriteThingsReducer(favoriteThings = [], action) {
  switch (action.type) {
    case "ADD_FAVORITE_THING":
      return [...favoriteThings, action.payload];
    case "REMOVE_FAVORITE_THING": {
      const updatedArr = favoriteThings.filter(
        (thing) => thing.toLowerCase() !== action.payload.toLowerCase()
      );
      return updatedArr;
    }
    default:
      return favoriteThings;
  }
}

youtubeVideo.js

export function setYouTubeTitle(title) {
  return {
    type: "SET_YOUTUBE_TITLE",
    payload: title,
  };
}
 
export function incrementViewCount() {
  return {
    type: "INCREMENT_VIEW_COUNT",
  };
}
 
export function upvoteVideo() {
  return {
    type: "UPVOTE_VIDEO",
  };
}
 
export function downvoteVideo() {
  return {
    type: "DOWNVOTE_VIDEO",
  };
}
 
const initialState = {
  title: "",
  viewCount: 0,
  votes: {
    up: 0,
    down: 0,
  },
};
 
export default function youTubeVideoReducer(
  youTubeVideo = initialState,
  action
) {
  switch (action.type) {
    case "INCREMENT_VIEW_COUNT":
      return {
        ...youTubeVideo,
        viewCount: youTubeVideo.viewCount + 1,
      };
    case "SET_YOUTUBE_TITLE":
      return {
        ...youTubeVideo,
        title: action.payload,
      };
    case "UPVOTE_VIDEO":
      return {
        ...youTubeVideo,
        votes: {
          ...youTubeVideo.votes,
          up: youTubeVideo.votes.up + 1,
        },
      };
    case "DOWNVOTE_VIDEO":
      return {
        ...youTubeVideo,
        votes: {
          ...youTubeVideo.votes,
          down: youTubeVideo.votes.down + 1,
        },
      };
    default:
      return youTubeVideo;
  }
}

index.js

const redux = require("redux");
const { combineReducers, createStore } = redux;
import countReducer from "./count";
import favoriteThingsReducer from "./favoriteThings";
import youTubeVideoReducer from "./youTubeVideo";
 
const rootReducer = combineReducers({
  count: countReducer,
  favoriteThings: favoriteThingsReducer,
  youTubeVideo: youTubeVideoReducer,
});
 
const store = createStore(rootReducer);
 
store.subscribe(() => {
  console.log(store.getState());
});
 
export default store;

Utilising redux in a component:

component/index.js

import store from "./redux";
import { changeCount } from "./redux/count";
import { addFavoriteThing, removeFavoriteThing } from "./redux/favoriteThings";
import {
  setYouTubeTitle,
  incrementViewCount,
  upvoteVideo,
  downvoteVideo,
} from "./redux/youTubeVideo";
 
store.dispatch(changeCount(42)); // {count: 42, favoriteThings: [], youTubeVideo: {title: "", viewCount: 0, votes: {up: 0, down: 0}}}
store.dispatch(addFavoriteThing("Door bells")); // {count: 42, favoriteThings: ["Door bells"], youTubeVideo: {title: "", viewCount: 0, votes: {up: 0, down: 0}}}
store.dispatch(addFavoriteThing("Sleigh bells")); // {count: 42, favoriteThings: ["Door bells", "Sleigh bells"], youTubeVideo: {title: "", viewCount: 0, votes: {up: 0, down: 0}}}
store.dispatch(removeFavoriteThing("door bells")); // {count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "", viewCount: 0, votes: {up: 0, down: 0}}}
store.dispatch(setYouTubeTitle("Learning Redux is Fun!")); // {count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux is Fun!", viewCount: 0, votes: {up: 0, down: 0}}}
store.dispatch(incrementViewCount()); // {count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux is Fun!", viewCount: 1, votes: {up: 0, down: 0}}}
store.dispatch(upvoteVideo()); // {count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux is Fun!", viewCount: 1, votes: {up: 1, down: 0}}}
store.dispatch(incrementViewCount()); // {count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux is Fun!", viewCount: 2, votes: {up: 1, down: 0}}}
store.dispatch(upvoteVideo()); // {count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux is Fun!", viewCount: 2, votes: {up: 2, down: 0}}}
store.dispatch(incrementViewCount()); // {count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux is Fun!", viewCount: 3, votes: {up: 2, down: 0}}}
store.dispatch(upvoteVideo()); // {count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux is Fun!", viewCount: 3, votes: {up: 3, down: 0}}}
store.dispatch(downvoteVideo()); // {count: 42, favoriteThings: ["Sleigh bells"], youTubeVideo: {title: "Learning Redux is Fun!", viewCount: 3, votes: {up: 3, down: 1}}}

Making redux store accessbile from on global scale, we need to provide the context to the app.

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./redux";
 
import App from "./App";
 
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Using store values and initiating dispatch in the component using hooks.

src/components/sampleComponent.js

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./redux";
 
function App(props) {
  const count = useSelector((state) => state);
  const dispatch = useDispatch();
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}
 
export default App;

Redux Thunk: Handling async actions

redux/index.js

import redux, { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
 
export function increment() {
  return (dispatch, getState) => {
    const number = getState();
    const baseUrl = "https://swapi.co/api/people";
    fetch(`${baseUrl}/${number}`)
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        dispatch({
          type: "INCREMENT",
          payload: res,
        });
      });
  };
}
 
export function decrement() {
  return {
    type: "DECREMENT",
  };
}
 
function reducer(count = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return count + 1;
    case "DECREMENT":
      return count - 1;
    default:
      return count;
  }
}
 
const store = createStore(reducer, applyMiddleware(thunk));
store.subscribe(() => console.log(store.getState()));
export default store;

Redux

Redux: The Basics

Redux: With more Complex state

Redux: With Combined reducers

Redux Thunk: Handling async actions

Additional Readings