Redux Spark
What is this?
Spark is a thin wrapper around redux and redux-saga. We tried to reduce boilerplate code in react/redux/saga applications. Instead of writing action types, action creators, sagas and reducer, Spark allows you to call a single function and generate everything under the hood.
If you want to customize anything, only thing you need to write is a reducer (again, everything else is generated). There is a lot of customizable options, so we think it covers a lot of use cases. If you still need something that is not supported, it plays nicely with a standard reducer/saga/types/creators setup.
Example
Spark comes with pre built generator. generateAsyncReducer
accepts two params - reducer's name and function that returns a promise. Hopefully live example will make it clearer.
;; // api.getUsers returns a promiseconst actionCreators = ; const get reset = actionCreators;
Code above generates:
- Four actions types - one for
reset
action and three for asyncget
action - Two action creators -
get
andreset
- Saga and watcher - for async
get
action usinggetLatest
- Reducer function - with the following state:// data returned from api.getUsersdata: object// error if api.getUsers failserror: object// loading indicatorsloading: boolean// all params passed to "get" action (i.g. pagination offset and per page)params: object
You can write your generators, we advise you to check the source in generate-async-reducer.ts, it should be pretty self explanatory.
Custom reducer
;; // Create app reducerconst global = 'global' isModalActive: false settings: null settingsError: null settingsLoading: false; // Add sync actionconst toggleModal = global; // Add async actionconst getSettings = global;
API
Before diving into API, be sure to check examples above.
Spark core
Reducers
getAllReducers
method will return array containing all of the generated reducers. You need to add it to your root reducer (only once).
;; // You can put any additional reducers here ...spark;
PLEASE NOTE you'll need to import your reducer files somewhere, so they are executed and registered in the spark core. If you want to do it manually, you can always get a single reducer using it's built in method .getReducerFunction()
; // Import spark reducer classes;; // You can put any additional reducers here // Call "getReducerFunction" to get reducer function from spark users: users groups: groups;
Sagas
Same thing for sagas. getAllSagas
will return an array containing all of the generated sagas. You need to yield them in your root saga.
;; { ;}
Async Reducer Generator
Reducer
-
Constructor
name
stringinitialState
any type (you can use plain object or for example Immutable instance)
Returns
Reducer
instance. -
addAction
actionName
string, camel cased (e.g.toggleModal
, generated action type will beTOGGLE_MODAL
).handler
reducer function with two paramsstate
andaction
.
Returns action creator function.
-
addAsyncAction
actionName
string, camel cased (e.g.getUsers
, generated action types will beGET_USERS_START
,GET_USERS_SUCCESS
,GET_USERS_ERROR
).asyncMethod
function that returns a promise. This promise will be resolved in the generated saga creator, and data returned to the handler.handlers
map (object) withstart/success/end
keys, each being reducer function with two paramsstate
andaction
. Each handler responds to one of the three generated actions.sagaOptions
object, if you want to customize saga effect or pass a custom saga, you need to pass it in this object.- Custom effect:effect: takeEvery
- Custom saga creator (it needs to be a function, so Spark can pass object with generated action types).yourCustomSaga
actionsTypes
is an object withstart/success/end
keys, each one corresponding to the action type. (e.g.GET_USERS_START
,GET_USERS_SUCCESS
,GET_USERS_ERROR
)
- Custom effect:
Returns action creator function.
By default generated saga will use
takeLatest
effect.
Development
Quick start:
npm start
This project was bootstrapped with Create React App. Check their default readme.