With the exponential pace of technological advancement, businesses strive to get the best out of it and to ensure their ...
Redux Toolkit - the efficient solution
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.
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:
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.
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.
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.
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.
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.
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 firstname.lastname@example.org
You may also like...
There’s little doubt that in an ever-changing startup environment, timing matters. Especially during the post-MVP ...