98k
a lightweight wrapper based on react, redux, redux-saga and react-router-dom, that aims to free you from tedious steps of creating action creators, reducers, sagas etc(inspired by dva).
Install
$ npm install --save 98k
Quick start
index.js
;; const app = ;//app.middleware(middlewares); //apply redux middlewares here app; appstart'#app';
counter.js
;; const Counter = <div> <div>count: count</div> <button onClick= >add</button> </div>; namespace : 'counter' state : count: 0 reducers: { return ...state count: statecount + payload ; } routes: '/': component: Counter ;
actionType is the key properties of reducers
prefixed by namespace
.
Options
const app = ;
Asynchronous action
const Counter = <div> <div>count: count</div> <button onClick= >asyncAdd</button> </div>; namespace : 'counter' state : count: 0 effects: * { ; ; } reducers: { return ...state count: statecount + payload ; } routes: '/': component: Counter ;
Routing
const App = <div>routing example: id</div>; namespace : 'example' routes : '/example/:id': component: App ;
Navigate routes programmatically
namespace: 'example' effects: * { const data = ; ifdata history; else history; } ;
Error handling
namespace : 'counter' state : count: 0 effects: * { ; throw 'some error'; ; } { console; console; ; } reducers: { return ...state count: statecount + payload ; } routes: '/': component: Counter ;
Plugin
you can add plugins via app.use
.
index.js
;;; const app = ; app start'#app';
A plugin is just a function that gets two parameters: injectReducer
and injectEffect
.
injectReducer
is used to add extra reducers.
injectEffect
is basically used to add a higher-order function that wraps saga function.
loading.js
{ const initialState = {}; ; ;}
parameters of injectEffect
are:
saga
- the current saga function that is being triggered
module
- the module object that this saga belongs to
type
- type of the current action
and saga helpers.