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.