How I automated the React + Redux development process.

#react #redux #bash #node

I worked on a medium-scale React.js project, which used Redux.js as it's state management tool sometimes last year. I got really bored having to repeat the process of declaring and importing "types" when I need to use a new "type", it got worse when I had to set up the project, repeating the process of creating actions, types, and reducers folders, I got bored. "There has to be an alternative," I thought.

So I embarked on a search on GitHub and NPM for an alternative solution. Although I found options like davezuko/react-redux-starter-kit on Github and @reduxjs/toolkit on NPM, these didn't solve the exact problem I had - repeating the same processes over and over again. So I had to create a solution by myself.

The Problem

Coming from a problem definition to problem solution perspective, I defined my problems as below :

The process of setting up react-redux is boring and repetitive.
Having to create a "type" file and create it's "action" and "reducer" file equivalent is stress.
Having to create and export a new type in a "type file", then importing the type in the use destination drains focus.
Every "reducer" file has the same template, so creating a new reducer file is repetitive in a way (unless doing a copy-and-paste).
Creating a new "reducer" file, importing in the rootReducer file and adding it to the "combineReducer" function is repetitive.

The solution

So I created a shell script with Node.js that handles all these problems.

The script is divided into modules, a "setup" module, and a "watch" module

the "setup" module SETS UP Redux in a basic React.js project by running the command "redux-helper setup" (The Project has to be structured like it was created with Create React App) as seen below.

The "watch" module WATCHES the project after REDUX has been setup and automates basic tasks like :

Synchronizes files across the actions, type and reducer folders respectively (If a type file, a reducer file, or an action file is created, it creates it's equivalent. )

Exports newly created files in the respective index files, and in the case of a reducer file, it imports It in the index file, and add the import to the combine reducer function.

A new redux “type” can be created anywhere from the corresponding action to the corresponding reducer file by using the shortcut !NT “type name” (and the newly created type is exported from the corresponding type file )