Introducing redux-nakshatra (STAR)

With the clarity that redux brings about app state, it also brings in a lot of boilerplate. There have been a lot of libraries (ex: redux-box, redux-modules, Kea)that have tried to address this. redux-nakshatra is yet another attempt in this space trying to reduce redux boilerplate, based on certain opinions. The opinions take form as a configuration object that this library takes and based on which all redux boilerplate are automatically generated. This library relies on redux-saga for managing side effects. redux-saga has been one of my favourite redux libraries. It is the conductor that handles complex orchestration in an elegant way. There comes first letter of STAR i.e. Sagas. The rest of the abbreviation stand for Types, Actions and Reducer which are basic blocks of a redux app.

In effect STARs (aka nakshatra) form the basic building blocks of this library. The library exposes a function called createStar.

Let’s say you want to fetch a list of items through a HTTP GET call, you can do something like

which internally generates the boilerplate as shown below(some details omitted for brevity).

You wont be seeing the above boilerplate code as part of your app code and hence keeps it DRY, concise and clean.

Once you have configured the store say something like

the state should look like

Lets say you add more endpoints like POST, UPDATE, DELETE, PATCH and PUT like

You can imagine the amount of code you would have to write for this.

A even more handy property that you can provide is generateDefault: true and if you follow the REST pluralized conventions such as

GET: 'http://localhost:5000/users' //returns all users 
GET: 'http://localhost:5000/users/:id' //returns a user 
POST: 'http://localhost:5000/users' // creates a new user 
DELETE: 'http://localhost:5000/users/:id' // deletes a user 
PATCH: 'http://localhost:5000/users/:id' // patches a user
PUT:  'http://localhost:5000/users/:id' // replaces a user

you can just use the following configuration

Not all APIs follow the same convention and when you need to change something small, you can use the override property

You can also add more endpoints along with default.

Note: This library currently is dependent on axios for http requests. So the redux actions generated for http takes axios config parameters (Not all of them yet)

If you have a graphql backend, you can use graphql property of config to define graphql mutations and queries. For example

This library currently depends on apollo-client for graphql.

And sometimes you need to write a fully custom saga may be aggregating data from different end points. In this case, you can do as shown below

If you need more low level control, you can add more actions, types, initialState, reducer, sagas separately as well. Example

Your app code now becomes a collection of STARs with all relevant parts i.e sagas, types, actions , reducer colocated thereby stripping away quite a lot of boilerplate

The documentation of the library is available at https://redux-nakshatra.js.org/

You can find source code of this project at https://github.com/agenthunt/redux-nakshatra

The project is currently under development. Feedback and contributions are welcome.