Why You Should Use Simpler-Redux For React-Redux Development

Simpler-redux is a new well tested library that simplifies react-redux development, but also greatly reduces react-redux code size, simplifies debugging and improves testing capabilities.

For a detailed explanation of the library, please see this article. To demonstrate the abilities of simpler-redux, I implemented a side by side comparison of the redux asynchronous reddit example located here with simpler-redux. The results are dramatic. The only change made to the redux example was to move the react view code in AsyncApp.js into a react presentational component.

For the results, the views and application scaffolding were excluded from the code counts because they are the same for both. After those exclusions and excluding comments, the simpler-redux code required only 52 lines of code whereas the react-redux version required 190 lines of code to do the same thing. That means the simpler-redux implementation is less than 1/3 the code size of react-redux.

Naturally, each line of code carries with it debugging and testing overhead so that differential is further multiplied. Moreover, if your project had 20 react-redux components, simpler-redux would require just 1040 lines of code whereas react-redux would need around 3800 lines.

More generally, the simpler-redux library provides the following.

• 100% compatibility with your current react-redux code base.
• Simple react style setState and getState functions for redux state management.
• Automatic generation of mapStateToProps so that you do not have to write any.
• Automatic generation of mapDispatchToProps so that you do not have to write any.
• Automatic generation of reducers so that you do not have to write any.
• Reduced code size and code complexity as compared to react-redux.
• Each generated reducer contains only one compare at each redux state transition which puts a small burden on performance as compared to normal redux reducers which can contain several case statements.
• Ability to handle a react component’s lifecycle events in a simple way in the business code separate from the react UI.
• Complete separation of the UI from the business code according to a MVC standard and the separation of concerns.
• Ability to test all business code and react lifecycle event code in isolation separate from the UI.
• Simple implementations for shared state management and shared business code without requiring additional reducers.
• Thunk middleware is not required. Asynchronous calls from the UI are handled in the same way as synchronous UI calls.

So, clone a working side by side implementation of the redux reddit example written in both simpler-redux and react-redux and verify for yourself the tremendous code savings and the simplicity of simpler-redux.

To integrate simpler-redux with your projects, simply install the library.

npm i simpler-redux

Then where you call the redux createStore add the following.

import { registerSimplerRedux } from ‘simpler-redux’

export const simplerReduxStore = registerSimplerRedux(reduxStore)

In your react-redux Provider, do the below.

import { simplerReduxStore } from './configureStore'
const App = () =>
  <Provider store={simplerReduxStore}>
    <MainApp />
  </Provider>.

That’s it. Now you can run all of your automated tests and verify everything works perfectly. Essentially, the above is equivalent to using the redux store because the simplerReduxStore is created using using Object.create with the redux store as the prototype.

Then to build your first simpler-redux component, use this component scaffolding repo and copy over a blank MVCNormal component. There are plenty of comments to guide you. You can have the typical increment component up and running in minutes. Simply follow the TODO:’s in the files. You can also use the reddit example for further guidance.

Source code and Installation

You can view the source code of the library at this github link. The automated testing generates 100 reducer keys in the store and then performs 100 state transitions per key for a total of 10,000 state transitions all of which are verified.

To install the library, perform the following.

npm i simpler-redux

Links

Github source code for simpler-redux

Simpler-redux-reddit-async-example

Simpler- redux skeleton project

Simpler redux asynchronous demo link

Simpler redux shared module asynchronous demo link

Detailed article on simpler-redux