Better Redux Reducers with TypeScript Builders

Better Redux Reducers with TypeScript Builders

In this post, I show how the builder pattern can be used to create Reducers in a TypeScript React-Redux app. I discuss the benefits of that approach before walking through the code and explaining what it does at each step.

In my last blog post, I introduced the builder pattern in TypeScript and discussed how you can use it to get more accurate types in your code. It was all very abstract, so I thought it might be useful to show another more complex example. If you haven’t read my last blog, I’d recommend it, but I’m the kind of person to ignore that warning so no judgement here!

In this post, I show how the builder pattern can be used to create Reducers in a TypeScript React-Redux app. I discuss the benefits of that approach before walking through the code and explaining what it does at each step.

It’s not perfectly type-safe, but that’s not the goal. Instead, we use the builder pattern to create a type-safe boundary around unsafe code. That way, we can get the best of both worlds - a utility method that is both safe and maintainable.

Redux Reducers

I’ll assume you have used Redux before, but here’s a quick primer if not:

Redux is a state management library that’s usually used with React. In Redux, there is a single global ‘store’ which contains the current state of the website. The store is updated by dispatching an ‘action’ onto the store. Each action has two properties, type and payload. Attach a ‘reducer’ to the store to define how the state should change when an action is received. Each reducer contains a number of cases, where each case handles a given type of action.

For a full explanation of those concepts and the terminology, read the official documentation.

Redux Type Safety

For the remainder of this post, we will be using Redux Toolkit, the official recommended way to develop Redux apps. However, you could easily tweak this code to work in a plain Redux project that doesn’t use Redux Toolkit.

In Redux Toolkit, you are expected to use ‘action creators’ rather than writing your actions as object literals. They are important later, so let’s start by writing a couple of action creators. I’ll assume our app is a counter, meaning the state is a number and we have two actions:

const incrementAction = createAction("increment");
const setAction = createAction<number, "set">("set");

Now that we have our actions, there are two ways to create a reducer that handles them:

  1. From a map of action types to handlers
  2. Using a builder

swaterman tech redux

Bootstrap 5 Complete Course with Examples

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

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

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

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.

Redux Tutorial - Learn Redux from Scratch

If you are interested in redux, watch this video now!

React and React Redux — Connecting to Redux

Redux is a light weighted State Management Tool that helps the components in our React App to communicate with each other. The simple concept behind this is that every state of the component is kept in a store that will be global. So that every component can access any state from that store.