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. 

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. 

Source: https://redux-toolkit.js.org/tutorials/quick-start

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. This would oblige a developer to several steps of handwritten code whereas now, Redux Toolkit’s configureStore function handles most of these steps automatically:

Source: https://redux.js.org/tutorials/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. 

Source: https://redux-toolkit.js.org/api/createAction

In Redux Toolkit there’s a more concise way to do it: createAction. Here, by combining the two declarations into one, this helper function simplifies the process.  CreateAction takes a type as an argument and returns an action creator for that type. When invoking this function, we have the option of passing it an argument that will define the payload attached to the action. 

Source: https://redux-toolkit.js.org/api/createAction

Should we want extra logic to generate the payload of our action, there’s also the option to specify a callback function as a second argument. More common applications tend to be for creating a random ID, getting a current time or accepting multiple parameters. 

Source: https://redux-toolkit.js.org/api/createAction

Reducer simplification through Immer

This is a helper function that simplifies the creation of reducers in Redux. As previously mentioned, createReducer uses Immer to write “mutating” logic which renders the code clearer, more direct and more intuitive. It also allows you to directly map action types to reducer functions. 

Source: https://redux-toolkit.js.org/api/createReducer 

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. Whereas in a traditional React-Redux application the actions and reducers are set up separately, Redux Toolkit’s createSlice defines and keeps them all in one place, making its code cleaner and more intuitive.

 

 Source: https://redux.js.org/tutorials/fundamentals/part-8-modern-redux 

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