🌍 All

About us

Design

Development

Digitalization

News

Startups

Redux Toolkit - the efficient solution

Agnieszka Niemiec

Jun 02, 2023・5 min read

Front-end developmentReactSoftware development

Table of Content

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

  • Boiling down the boilerplate

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

  • Reducer simplification through Immer

  • createSlice - keeping it all together

  • Toolkit: Intuitive Ease and Elegance  

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

 
Redux Toolkit - the efficient solution

Published on June 02, 2023

Share


Agnieszka Niemiec Junior Frontend Developer

Don't miss a beat - subscribe to our newsletter
I agree to receive marketing communication from Startup House. Click for the details

You may also highlightlike...

14 accessibility hacks to make your users’ day better
AccessibilityUX designFront-end development

14 accessibility hacks to make your users’ day better

Accessibility in app development is often overlooked, but it plays a vital role in ensuring inclusivity and improving user experience for individuals with disabilities. With approximately one billion people worldwide experiencing some form of disability, it's crucial to consider accessibility as a necessary aspect of app design and development. By incorporating accessibility features from the beginning, you not only cater to a significant user base but also create a more user-friendly and inclusive app for everyone.

Maciek KozƂowski

Dec 02, 2019・7 min read

Ensuring HIPAA Compliance in Healthcare Apps with Startup House: A Comprehensive Guide
Cloud computingSoftware developmentWeb development

Ensuring HIPAA Compliance in Healthcare Apps with Startup House: A Comprehensive Guide

Startup House is the trusted partner for building HIPAA-compliant healthcare apps with advanced security solutions. From utilizing advanced cloud solutions to implementing comprehensive audit logs and robust security measures, we prioritize privacy, security, and compliance. With 24/7 threat detection and secure data storage, your app remains protected at all times. Choose Startup House for a reliable and secure solution that gives you peace of mind.

Marek Majdak

May 11, 2023・3 min read

Everything You Need to Know about Nearshore Software Development
Software development

Everything You Need to Know about Nearshore Software Development

When hiring a highly skilled software development team without breaking the bank becomes a challenge, nearshore software development outsourcing offers a cost-effective solution. Learn about the benefits, comparison with offshore and onshore models, and how to choose the right nearshore development company. Mitigate risks and ensure secure data storage. Startup House provides cost-effective and optimal software development outsourcing. Contact us today. That’s why it might be a good idea to consider some nearshore software development outsourcing services. But what does a nearshore software development model look like, exactly? And when should you go for it?

Alexander Stasiak

May 19, 2023・5 min read

Let's talk
let's talk

Let's build

something together

highlightRethink your business, go digital.

Startup Development House sp. z o.o.

Aleje Jerozolimskie 81

Warsaw, 02-001

VAT-ID: PL5213739631

KRS: 0000624654

REGON: 364787848

Contact us

Follow us

logologologologo

Copyright © 2024 Startup Development House sp. z o.o.

EU ProjectsPrivacy policy