The tagline for Redux Toolkit reads: “The official, opinionated, batteries-included toolset for efficient Redux development”. In this article, I would like to break down this statement, examine the claim to efficiency and give some examples to confirm its legitimacy.

The “official” part clearly shows that the creators of Redux introduced Toolkit after having recognised that in its original form, Redux requires too much boilerplate code. As this excess of code can become problematic and rather messy (particularly in larger, more complex applications), they decided to upgrade it to a more opinionated tool to alleviate the need. In doing so, they have provided clearer guidance, a set of practical instructions and “good defaults for store setup out of the box”. 

Batteries included (a.k.a. built-in libraries)

Redux Toolkit comes with built-in libraries the developer must install and set up separately using Vanilla Redux. This enhancement helps to simplify the code and acts as a sort of ‘create-react-app’ for Redux. 

These libraries include Redux, Redux-Thunk, Reselect, and Immer.

The Immer library brings extra security whilst taking care of immutable state updates. Its mechanism is internally used in Redux Toolkit’s createSlice and createReducer and allows you to write “mutating” code in reducers. For instance, instead of returning a new object, you can directly change the state within a createReducer function.

As shown in the example above, the state values inside reducers undergo mutations. Under the hood, however, what’s really happening is the creation of a draft state from which the new state will be produced, based on these mutations. In Vanilla Redux, there’s no option for directly changing the values inside reducers nor to use methods like push without first making a copy of the state via spread operators. Unfortunately, this becomes complicated and error-prone, particularly when the updates are performed in a deeply nested state.

Boiling down the boilerplate

As noted, the most common criticism of Redux was that it added a large amount of boilerplate code to the app, starting with the store setup. Redux Toolkit’s configureStore function handles most of these steps automatically. It combines the slice reducers into the root reducer, uses that root reducer to create the store, adds the Redux thunk middleware, and also sets up the Redux DevTools extension.

This can be better understood by looking at the example from Redux Fundamentals, Part 8 - Modern Redux.

In this example, the call combines the slice reducers into the root reducer, uses that root reducer to create the store and adds the Redux thunk middleware. Moreover, it adds additional middleware to prevent mistakes like state mutation (as above), and also sets up the Redux DevTools extension. 

createAction: streamlining action types, action creators, call-backs & payloads 

Further examples of excess boilerplate code in Vanilla Redux were found in the process of creating actions to describe events for reducer functions to perform. 

To generate actions of that type, developers first had to declare a constant that contained a string describing action type, then create a function called action creator. For example, in Vanilla Redux you might write: const ADD_TODO = 'ADD_TODO'; const addTodo = text => ({type: ADD_TODO, payload: text});

You can learn more about how to streamline action types, action creators, callbacks, and payloads in the official createAction API documentation.

In Redux Toolkit there’s a more concise way to do it: createAction. This helper function takes a type as an argument and returns an action creator for that type. For instance, you could write: const addTodo = createAction('ADD_TODO');

Detailed examples of how to use the callback function for generating payloads can be found in the createAction section of the Redux Toolkit API documentation.

Reducer simplification through Immer

This is a helper function that simplifies the creation of reducers in Redux. It allows you to directly map action types to reducer functions. For example, in Redux Toolkit you could write: const counterReducer = createReducer(0, {increment: state => state + 1, decrement: state => state - 1});

For a closer look at how to simplify the creation of reducers in Redux, see the createReducer API documentation.

As you can see, the javascript switch statement is no longer necessary in reducers and as such,  further contributes to the elimination of boilerplate code. 

createSlice - keeping it all together

In Redux Toolkit, possibly the most useful feature further simplifying Redux reducer logic and actions is createSlice API. This is a helper method that generates a store slice and consists of an initial state, a reducer function and automatically- generated action creators. 

For example, you might write: const counterSlice = createSlice({name: 'counter', initialState: 0, reducers: {increment: state => state + 1, decrement: state => state - 1}});

Refer to the Redux Fundamentals, Part 8 - Modern Redux for an example of how to use the createSlice API.

As mentioned, the methods at work inside createSlice are createReducer and createAction.

Redux Toolkit consists of other useful APIs like createAsyncThunk for managing HTTP requests and other side effects, and createSelector, from a built-in Reselect library, allowing you to extract specific variables from the state. The selectors are memoized so that only the values which change are recalculated. 

Toolkit: Intuitive Ease and Elegance  

Redux logic might seem confusing at first, but thanks to Redux Toolkit it soon becomes easier to grasp. And it is undoubtedly more intuitive. With clearer flow, efficiency and elegance, Toolkit enables you to tackle many of the traditional problems posed by Redux with ease and confidence.  

Check out the official documentation to learn more about Redux Toolkit.

Would you like to know more about Redux Toolkit? We’d be happy to help. Write to us at hello@start-up.house