@36node/redux 中文文档教程

Question

@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 has meta.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