React's UseReducer with Redux toolkit. Why Not?

React's UseReducer with Redux toolkit. Why Not?

Who said Redux and useReducer couldn't enjoy some time together?

useReducer is a convenient React Hook that lets you manage complex state updates, as much as you would do with a Redux reduceruseReducer, and the Context API might look like a replacement for Redux, but don't get fooled.

I enjoy using React hooks, but I also like Redux so much, and these days with Redux Toolkit Redux is even more compelling.

While working with useReducer I found myself thinking: now that we have createActioncreateReducercreateSlice in Redux Toolkit, why on earth would I write a reducer with its actions by hand even if I'm using just useReducer?

An example with useReducer

Consider a contrived example with useReducer. I understand the point of it: we want to get rid of Redux. To stay as much boilerplate-free possible we can do:

import React, { useReducer } from "react";

const authState = {
  isRequestingToken: "",
  username: "",
  token: "",
  error: ""
};

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN_START":
      return {
        ...state,
        isRequestingToken: "yes",
        username: action.payload.username
      };
    case "LOGIN_SUCCESS":
      return { 
        ...state, 
        isRequestingToken: "no", 
        token: action.payload.token };
    default:
      return state;
  }
}

export function SillyThings() {
  const [state, dispatch] = useReducer(authReducer, authState);

  function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const username = formData.get("username");

    dispatch({ type: "LOGIN_START", payload: { username }});

    // omit for brevity
  }

    // omit for brevity

}

redux

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Modern Redux with Redux Toolkit

Modern Redux with Redux Toolkit - Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development. Mark Erikson, long-time Redux maintainer and avid blogger about all things web development showed us the potential of Redux in action with an awesome demo!

Reduce Redux Boilerplate Code with Redux-Actions

In this article, we will look at how to reduce the boilerplate code brought about by Actions and Reducers using Redux-Actions

Simplifying Redux with Redux Toolkit

Redux Toolkit is an opinionated, batteries-included toolset for efficient Redux development. In this article, you will see why the Redux Toolkit deserves more attention in the React community.

How to implement Redux Saga with ReactJS and Redux?

In this article, I’d like to tell you more about the Redux library and create a simple ReactJS project, where I’ll set up a Redux step by step.

How To Setup Redux Slices with Redux Toolkit

Redux Toolkit popularity is growing every month. What exactly helps developers to write code faster, easier, more clearly? One of the helpers is createSlice function. createSlice takes an object of reducer functions, a slice name, and an initial state value and lets us auto-generate action types and action creators, based on the names of the reducer functions that we supply. It also helps you organize all of your Redux-related logic for a given slice into a single file.