Redux-Toolbelt: Supercharged Redux — Part 1
10x less code, 10x more power — an introduction
redux-toolbelt is a set of tools for quicker, easier and safer Redux development with much less verbosity. It was created by welldone-software consultancy over the last two and half years. It is used in production by many of our customers. The library is composed of several npm packages that you can install and use individually.
While having many advantages, redux can be frustrating and verbose. The toolbelt is meant to make your code smaller and better and your life easier and longer…
In this article, we will introduce the library and in the next article we will cover the basics of redux-toolbelt’s usage.
Code Reduction
One of the prominent features of redux-toolbet is reducing common boiler plate code used during Redux development. We have achieved up to 80% code reduction and made the code much more readable and clear. Obviously, development time and bugs dropped significantly as well.
As a first example, lets look at the redux vanila (with redux-thunk) code required to asynchronously fetch a list of todo items. This is quite a lot of code for such a simple task:
The equivalent toolbelt thunk bindings code is a lot shorter:
As can be seen, we only require very few lines of code (w/o imports, only 2!).
The Trick — metadata and conventions
Redux toolbelt attaches metadata to the action creator. This data that includes type information and all the related sub action creators (success, failure etc). The result is a self contained encapsulation of all that is needed to execute and handle the flow of an asynchronous action.
This action creator can now be used in all circumstances where either its type, it derived actions or their type is needed. The action and its derivatives can easily be used in vanila redux code.
Holistic Approach — not just actions creators, not just thunk
Indeed, there are many good libraries that help reducing Redux boilerplate code, but unlike most others redux-toolbelt helps you across the board. In addition, toolbelt makes your code easier to read and actually improve the quality of your code and your team’s practices.
Also, while staying non-monolithic and extremely modular, it can help you with almost everything Redux: declaring and using actions, creating, reusing and composing reducers, working with synchronous and asynchronous scenarios and manipulation complex immutable state with ease. It even provides helpers for projects using different types of effects and asynchronous actions handling.
The toolbelt has binding for thunks, sagas and redux observable. Here is an example of the above, using the binding for redux-tooblelt-observable:
Besides actions, reducers and asynchronous operations support, the toolbelt includes also utilities immutable data manipulation. Following are examples of upsert and remove operations done using the toolbelt. This is a much less code, much more readable and safer way of data manipulation.
In the above example we can also see how the toolbelt can work within vanila redux code. The reducer is a plain reducer but the actions and data manipulation used is that of the toolbelt. You can mix and match the toolbelt with vanila redux in any way you want.
Makes the overall picture clear, even in very complex scenarios
Vanila redux is verbose and requires many lines of code, files etc. Many time this causes the overall picture to be hard to see and understand. Besides reducing the amount of code substantially the toolbelt composeReducers which is a combination of compose and combineReducer can support very complex state structures and make them much easier to understand. The below code is an example of a very complex store structure of a shared document (e.g google docs document), with animations and sounds, permissions, metadata and much more. One that would take many hundreds of lines of vanila redux code to setup. While you are still not
Summary — Benefits of using toolbelt
- Much less code to write, read, search though, explain and debug.
- Makes the structure and overall picture a lot more clear and allows you to concentrate on your actual business needs. You can now type problem solving code instead of boilerplate
- Promotes consistency (everything looks and behaves the same across the whole project. In our and many other cases, even across multiple projects.
- Employs Best practices (patterns, DRY, FSA, naming and namespacing, immutability, granular and global error handling and loading indication)
- Leverages functional programming, statelessness, purity, immutability and composition. All the good stuff you are already familiar with.
- Adds Safety (no strings constants, single source of truth, battle proven code)
- Symbiotic (when combining several parts, value is bigger then the sum of the parts used)
- Scalable (code and complexity grow mildly & linearly, and even drop at times due to high level of reuse)
- Provide solutions across the board, for all your redux needs and integrates well with the redux echo system. (synchronous and asynchronous models, beneficial for thunk, saga, observable and custom middleware projects.
- Works great with Pojo’s. No need for ImmutableJS and the likes.
- Open and flexible.
- Actively maintained and improved. Bugs are solved and features are added constantly.
- Your input, requests, ideas and contributions are welcome.
- Very simple (once you get the grip of it)
- Well documented. Has docs, examples and accompanying article. Self documenting, clear and minimalist code.
- Thoroughly tested (has unit test suite and used in many production project, aka ‘reality’ suite)
Where to find out more?
The toolbelt fully documented on github, it also has many examples and a test suite which you can learn from.
