If you have been using Redux for managing your application’s state, you unfortunately know how much of a tiresome work it is to get it right. The hand written code needed to set up Redux manually itself needs a time estimation as much as an application feature. In addition to that, you need to manually install additional packages such as react-redux to get it on working on React Js, reselect to select slices of your state, immer for immutable state, etc.
The Problem of Redux
Redux comes with its own challenges straight out of the box, such as:
- Boilerplate code which inevitably which leads to bugs,
- Hard to set up and configure,
- The horrific act of manually defining actions types constants,
- Manually writing immutable state(like obj spreading, etc…),
- No right way of using Redux with code logic split over multiple files, etc
The magic potion: Redux Toolkit
Redux Toolkit is basically the rebirth of Redux (via hooks). Its main aim is to simplify a developer’s life by eliminating the required setup boilerplate for ease of use.
Redux Toolkit wraps around the core redux package, and all the core idea of having a single store, with dispatched action objects for updates, and reducers that immutably update state is still present. What is different is that there’s just way less code to write.
According to the documentation,
Redux Toolkit includes several utility functions that simplify the most common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire “slices” of state at once without writing any action creators or action types by hand.
Main Features
- configureStore API: Creates a Redux store instance like the original createStore from Redux, but accepts a named options object and sets up the Redux DevTools Extension automatically.
- createAction API: Accepts an action type string and returns an action creator function that uses that type.
- createReducer API: Accepts an initial state value and a lookup table of action types to reducer functions and creates a reducer that handles all action types.
- createSlice API: Accepts an initial state and a lookup table with reducer names and functions and automatically generates action creator functions, action type strings, and a reducer function. And more importantly, it lets us mutate our state safely :)
Having these built in utility functions not only takes so much load off of the developers shoulders, but also helps in creating a standardized and manageable pattern of state management.
The Advantages
- With a few lines of code you end up with action creators, reducers, action types created, and initial state in the same file,
- Internally uses Immer to let you write simpler immutable update logic using mutating syntax,
- Redux Thunk is supported out of the box for handling side effects,
- No more writing long switch statements,
- Simplifies store setup down to a single clear function call,
- Exquisite TypeScript Support, and so much more
We will take a look at the differences between Redux and Redux Toolkit on the second part of this blog along with hands on examples. Stay tuned!
