Redux

Note - This article assumes basic knowledge of Redux and its usage in React. You can read more about it here.

Redux is implemented in this app via React-Redux. The architecture is built in a way that centres around configuration, along with a boiler plate code on top of React-Redux. This will enable you to concentrate on creating actions, reducers, enhancers and middlewares, while we take care of the configuration. Our main aim is to not to waste time creating separate action files and avoid creating same action boilerplate again and again.

How it all works?

If you have worked on redux before, you must be familiar with creation of multiple action creator files, reducer files, importing them and making it all work. This approach causes a lot of duplicacy of code while creating action functions, importing them across app, in case of ajax requests, creating request specific code again and again.

We use a approach where you simply create actions in a single configuration file in a simple object, Handle it in reducer if you want to. Using this configuration file we create actions on the fly and handle it all at runtime.

For reducers, simply create a file with reducer function in a specific folder and it gets imported and configured automatically.

The core redux setup at app/@arivaa-react/redux contains all the code related to the core architecture that creates actions on the fly by reading the configuration you provide. 

Actions and reducers are maintained in app/redux folder.

Actions Configuration

In this application, actions are maintained in a single file as explained above in app/redux/actions/index.js. It looks pretty much as below :

Normally, in any type of application, we believe that actions are either ajax calls or just simple functions which return the action name and payload. Thus, instead of creating an action function every time, we use the configuration file which describes the type of action, configuring it as json object. This leaves the creation of action to the architecture.

Under actions folder, index.js handles the reading of configuration files, as well as the creation of actions from the configuration file.

Below is the json schema for creating an action object-

{
   name - Action Name
   type - Type of Action - ajax or empty for normal action ->
   config - {
       url => For Ajax
       method => For Ajax
       headers => For Ajax
       promise => For normal action -> if we want data to be resolved as dummy promise
       getData => General -> If we want to customize the data -> Input data is passed as argument
       getParams => For Ajax -> If we want to get params out of input data
  }
 }

There could be cases where in you want to create your own actions instead of using this configuration so you can put them in custom folder under actions folder and simply export it in the normal way in components how you would do normally as explained at https://redux.js.org/basics/actions