React and Redux are a top choice for front end projects. React provides fast performance, easy ways to create shared components, and a plethora of libraries. Redux lets you simplify state management in your application, but it has serious drawbacks.
In large projects, Redux bloat your project with repetitive code. To support a single store update, you need to create a reducer that handles an action type which is dispatched from an action called inside a component. If that process sounds tedious and confusing, that’s because it is. You end up with tons of simple actions and reducers that all look alike.
People went to great lengths to combat this problem. Suggestions range from using a new state management library, such as Mobx, to abandoning React completely for something like Vue. These suggestions are like throwing the baby out with the bath water. That’s why I was happy to find Redux-Easy which didn’t make me leave these libraries behind.
Redux-Easy doesn’t try to replace Redux or React. Instead, it removes the boilerplate and provides helper functions. You don’t need to replace your entire code base. You can incrementally integrate Redux-Easy
To see how well it delivered on these promises, I decided to try it with the classic Todo MVC application. The Redux library even comes with an idiomatic example, which I used as a starting point.
Reducing Boilerplate Code
Redux-Easy simplifies the creation of the store. Instead of manually creating
the store, passing it to the
Provider, and wrapping your app in the
Provider. You use
reduxSetup to do all those steps for you:
You no longer manually group the actions handled by the reducer, nor combine
the reducers into to a single root reducer. Instead, you use
manages the root reducer for you, and you can add the handler from anywhere:
mapDispatchToProps, you use the provided
to fire off action:
mapStateToProps, you wrap your component in a
function. This functions lets you map object from the state using the state
Helpers for Common Actions
These are simple and flexible ways to manage simple modifications to your
state. For actions dealing with arrays, there are
These helpers do what you would expect. They cover 80% of the actions you need to perform on the store.
With actions like
completeTodo, I reduced the traditional flow,
spread cross 4 files, to a single function defined on the component using it:
completeTodo is an example of modifying an array. It takes the store path
and a function. Then it maps the function over the array pulled from the path.
The dispatch, action, and reducer are all taken care of by
Redux-Easy delivered on its promise of making Redux development shorter and simpler. Using it, I removed 5 out of 7 action handlers. I reduce the lines of code by 10% from 503 to 447, and the number of files by 30% from 20 to 14.
Most importantly, organize the code became simpler. The state logic is closer to where it’s being used and is easier to follow.
You can find the full version of my TodoMVC using Redux-Easy here.