@36node/redux
v0.3.17
Published
A set of predefined actions, reducers, selectors and sagas for 36node team
Downloads
131
Readme
@36node/Redux
A set of predefined actions, reducers, selectors and sagas for 36node team.
@36node/redux 将会有较大改动。注意避雷。
Assign
Save any value to redux.
Assign Action
import { makeAssign } from "@36node/redux";
const assign = makeAssign("someKey");
// set value
dispath(assign(someValue));
Assign Reducer
import { assignReducerRoot } from "@36node/redux";
export default combineReducers({
...assignReducerRoot,
});
Assign Selector
import { makeAssignSelector } from "@36node/redux";
// selector maker
const select = makeAssignSelector("someKey");
const some = select(state);
Toggle
Toggle usually works as a swither, open or close.
Toggle Action
import { makeToggle } from "@36node/redux";
const toggle = makeToggle("someKey");
// switch to true or false
dispath(toggle());
// switch to true
dispath(toggle(true));
// switch to false
dispath(toggle(false));
Toggle Reducer
import { toggleReducerRoot } from "@36node/redux";
export default combineReducers({
...toggleReducerRoot,
});
Toggle Selector
import { makeToggleSelector } from "@36node/redux";
// selector maker
const select = makeToggleSelector("someKey");
const some = select(state);
Progress
Represent an progress logic in redux.
Progress Actions
import { makeProgress } from "@36node/redux";
const progress = makeProgress("someKey");
// increase action, default step = 1
dispatch(progressActions.increase(5));
// decrease action, default step = 1
dispatch(progressActions.decrease(5));
// init action, default params: pos: 0, step = 1, min = 0, max = 100
dispatch(progressActions.reset({pos: 0 step: 1, min: 0, max: 100}));
Progress Reducer
import { progressReducerRoot } from "@36node/redux";
export default combineReducers({
...progressReducerRoot,
});
Progress Selector
import { makeProgressSelector } from "@36node/redux";
const select = makeProgressSelector("someKey");
// state: {pos, step, min, max}
const some = select(state);
Form
Form in redux.
Form Actions
import { makeForm } from "@36node/redux";
const form = makeForm("someKey");
// reset form to initState, or payload
dispatch(form.reset(payload = {}, meta));
// save form fields
dispatch(form.saveFields({ field1: {value: "x", name: "name"}, field2: {...} }));
Form Reducer
import { formReducerRoot } from "@36node/redux";
export default combineReducers({
...formReducerRoot,
});
Form Selector
import { makeFormSelector } from "@36node/redux";
const select = makeFormSelector("someKey");
const some = select(state);
Api
Redux-api is a library which can easily write client to communicate with backends. It generates actions and selectors for making ajax calls to API endpoint. Also, it use saga to change ajax state and save result in redux store with few config.
Api Actions
createApiMaker: It is a creator of api actions maker.
import { createApiMaker, makeApiTypes } from "@36node/redux";
const STORE_LIST_PETS = makeApiTypes("STORE_LIST_PETS");
const makeListPets = createApiMaker(
STORE_LIST_PETS,
sdk.petstore.pet.listPets,
[petSchema]
);
const listPets = makeListPets("someKey");
// list pets from service
dispatch(listPets({ query: {} }));
Api Reducer
import { apiReducerRoot } from "@36node/redux";
export default combineReducers({
...apiReducerRoot,
});
Api Selector
import { makeApiSelector } from "@36node/redux";
const select = makeApiSelector("someKey");
const some = select(state);
Api Saga
redux/api
should use with saga.
import { fork, all } from "redux-saga/effects";
import { watchApi } from "@36node/redux";
export default function* root() {
yield all([fork(watchApi)]);
}
Write an endpoint function of an api
import fetch from "@36node/fetch";
// endpoint function param is request action payload
function listPetsEndpoint(req) {
const { query, headers } = req;
// also can user other ajax tools, should return a promise
return fetch(`${some_url}/pets`, {
method: "get",
query,
headers,
});
}
Cron
An redux library for cron like logic, which can be used for:
- scheduled job
- trigger progress auto increase or decrease
- timeline, like player control
Cron Actions
import { makeCron } from "@36node/redux";
const cron = makeCron("someKey");
// start cron
dispatch(cron.start({ pos: 0, min: 0, max: 100, step: 1 }));
// stop cron
dispatch(cron.stop);
// reset cron
dispatch(cron.reset({ pos: 0, min: 0, max: 100, step: 1 }));
// tick cron
dispatch(cron.tick({ pos: 5, tickedAt: new Date().getTime() }));
Cron Reducer
import { cronReducerRoot } from "@36node/redux";
export default combineReducers({
...cronReducerRoot,
});
Cron Selector
import { makeCronSelector } from "@36node/redux";
const select = makeCronSelector("someKey");
const some = select(state);
Cron Saga
redux/cron
should use with saga.
import { fork, all } from "redux-saga/effects";
import { watchCron } from "@36node/redux";
export default function* root() {
yield all([fork(watchCron)]);
}
Helper saga
watchHelper saga should be configured in saga, if we want to use tap and reput.
import { fork, all } from "redux-saga/effects";
import { watchHelper } from "@36node/reudx";
export default function* root() {
yield all([fork(watchHelper)]);
}
Other Apis
isAction(pattern, key): checker(action)
: return an action checker.makeAction(type, keyPattern, initPayload, initMeta): action(payload, meta)
: return an action creator.makeReducer(is, reducer): reducer(state)
:is
is an action checker, reducer is a sub reducer.makeSelector(key, initState): select(state)
: return a selector.rePut(action)
: rePut is a saga effect, used to re dispatch an action which hasmeta.rePut == true
tapOn(type, key, saga)
: low level tap function, to trigger saga for given type and key.watchHelper
: helper for tap and reput saga