Remodule — Redux for Lazy People

Remodule logo

Warning! Do not read this article if you do not like an easier life.

Stop now if you enjoy any of the following:

  • Lots of boilerplate
  • Doing the same thing in 3 different places
  • Creating lots of action creators and reducers
  • Splitting state management across multiple files and forgetting what is where
  • Missing out a step when setting up state

If, on the other hand, you want to get on building your app to get to MVP as quickly as possible then please read on.

Redux

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. — http://redux.js.org/

I love Redux. One of the best things about redux is its simplicity, which makes it easy to understand what is happening with state. You dispatch an action, the action sends a payload to a reducer, the reducer updates the store. A hello world app with Redux is not that difficult. Once your project starts to grow, the simplicity of Redux management becomes a nightmare for the reasons stated in the disclaimer as well as others, if you are following the implementation in the docs.

While looking for a better way to manage Redux I came up with Remodule.

What is Remodule?

Remodule is Redux, but it removes the tedious tasks of organizing, splitting and collating files. It also does away with the need for constants and creating actions and reducers. Remodule is simply a pattern to encapsulate actions and reducers into modules.

Remodule can be installed via npm

npm install remodule

For the seriously lazy skip to the Seriously Super Lazy Redux section below.

Modules

Remodule uses ES6 class syntax to encapsulate standard actions and reducers inside classes refered to as modules. Actions and reducers inherit the name of their module in camel case. Actions and reducers can then be passed to a connector store function such as in react-redux.

Just as in Redux actions return a type and a payload. The action type is the name of the reducers module of the state to be updated. This does not need to be in the same module. Classes do not need to always have an action or a reducer. Initial state can also be added to in the module.

Register

Each module file is imported into the remodule function and Remodule then maps all the actions to props, combines all the reducers and creates the redux store automatically.

Example

This example is going to use react and can be found in the example directory in the Redux repository on Github.

We’ll begin by creating two modules.

Module1 and module2 have multiple modules to update their state properties. Both modules have an initial state so when the app makes its initial render the state will not be undefined.

The remodule function takes an array of modules and returns actions, mapStateToProps and the store.

The higher order component connect takes the combine actions, and mapStateToProps returned by the Remodule modules. The connect function is not required to be in store.js but is more convenient than duplicating in every container.

A redux store is exported which takes an array of middleware. The store can then be added to the Redux Provider.

Finally the connect method can take a component and add all the actions and mapped state to props.


Seriously Super Lazy Redux

For the majority of use cases Redux is used as a simple getter and setter. If that is your use case you can pass an initial true option to the remodule function. This will create actions and reducers for all initialState properties and for the register module. Actions and reducers based on initialState properties are prefixed with the module name as means of namespacing.

Here’s how the App.js and the modules look now.

(Don’t forget to add initial option to the remodule function)

// build actions, mapStateToProps and store from modules
const { actions, mapStateToProps, store } = remodule( [module1, module2], {initial: true });

As above you can still add your own Remodule modules. But there will already be actions and reducers for all the initialState properties.


If like me you love redux but are too lazy for all that boilerplate, Remodule is for you.



I’m Otis Virginie, A Full Stack (React, Redux, Node, GraphQL) JavaScript Developer.