@plume/flow
TODOS
Usage
model
|- namespace
|- state
|- reducers
|- effects
action
|- isEffect
|- type
|- payload
reducer
|- preState
|- payload
effect
|- actions
|- payload
|- getState
- actions -> 包含所有 action 动作（有副作用、无副作用）
- effects -> 包含所有副作用的动作的处理
- 注册所有 model 到 this._models
- 生成所有的 action 到 actions 对象
- 生成所有的 effect 函数到 effects 对象，实现 action.type 对应 effect
- 生成无副作用的 reducer 到 redux，实现 action.type 对应 reducer
- 生成 asyncMiddleware
- 生成 store
- 注册 ReactDOM.render
INSTALL
yarn add -D @plume/flow
# or
npm i -D @plume/flowUSE
最小实现代码
import Flow from "@plume/flow";
const app = new Flow();
app.run();默认会生成一个页面，显示Hello Flow!
入口模块
entry属性表示程序的入口，默认为<div>Hello Flow!</div>
import React from "react";
import Flow from "@plume/flow";
const Main = () => <div>Main module.</div>;
const app = new Flow({
entry: <Main />,
});
app.run();模型（model）
Flow 通过模型来定义某一类业务场景的动作和状态
// 模型A modelA.js
export default {
namespace: "compute",
state: 0,
reducer: {
plus: state => state + 1,
minus: state => state - 1,
},
effect: {
asyncPlus: async (_payload, actions) => {
setTimeout(() => actions.compute.plus(), 500);
},
asyncMinus: async (_payload, actions) => {
setTimeout(() => actions.compute.minus(), 500);
},
},
};在初始化的时候，配置models属性来注册定义的模型，models属性只能传递数组对象
// index.jsx
import Flow from "@plume/flow";
import modelA from "./modelA.js";
const app = new Flow({
models: [modelA],
});
app.run();namespace属性定义了模型的命名空间，故必须是唯一的
state属性为模型的状态，可以是number/object/string/array/boolean，如果为空，则默认设置0
reducer属性定义了无副作用的动作
effect属性定义了有副作用的动作，且必须为 async 函数
容器组件（container component）
Flow 的state和actions需要通过容器组件来传递，通过导入createContainer方法来生成一个容器组件
// 包装组件A
import React, { Component } from "react";
import { createContainer } from "@plume/flow";
class A extends Component {
render() {
const { state, actions } = this.props;
const { plus, minus } = actions;
return (
<div>
<div>{state}</div>
<button onClick={() => plus()}>plus</button>
<button onClick={() => minus()}>minus</button>
</div>
);
}
}
return createContainer(A, {
namespace: "compute",
});createContainer方法做了两件事情：
- 把 A 组件绑定到
compute模型上 - 把 compute 模型上的
state和actions传递给 this.props
其中，state表示当前模型上的状态，actions表示当前模型上可以触发的动作
APIs
Flow
signature
new Flow([options])
| name | type | default | desc |
|---|---|---|---|
| Flow | constructor | - | 构造函数，通过new创建实例 |
options
| name | optional | type | default | desc |
|---|---|---|---|---|
| root | true | String | "root" | 目标 html 节点的 id 属性 |
| entry | true | ReactElement | Hello Flow! |
入口组件 |
| models | true | Array | [DEFALUT_MODEL] | 模型的数组 |
| middlewares | true | Array | [] | redux 中间件的数组 |
*DEFALUT_MODEL:
{
namespace: "*DEFAULT_MODEL*",
state: 0,
reducer: {
plus: state => state + 1,
},
}instanced
flow.run(): 开始运行
createContainer
signature
createContainer(<ReactElement>, [options]): ReactElement
Options
| name | optional | type | defalut | desc |
|---|---|---|---|---|
| namespace | true | String | null | 模型的命名空间，如果为空，则state或actions为所有模型的state或actions的对象。如果有，则只包含此命名空间下的state或action
|
| state | true | Function | null | state 过滤方法，返回过滤后的 state |
| actions | true | Function | null | actions 过滤方法，返回过滤后的 actions |
| mergeProps | true | Function | null | 同 react-redux 中 connect 函数的 mergeProps |
| options | true | Function | null | 同 react-redux 中 connect 函数的 options |
example
假设现在有两个模型A和B
// model A
{
namespace: "A",
state: 0,
reducer: {
a_plus: state => state + 1,
a_minus: state => state - 1
}
}
// model B
{
namespace: "B",
state: 0,
reducer: {
b_plus: state => state + 1,
b_minus: state => state - 1
}
}实现一个容器组件C
import React, { Component } from "react";
import { createContainer } from "@plume/flow";
class C extends Component {
render() {
const { state, actions } = this.props;
return <div>container component C.</div>;
}
}
return createContainer(C);如果没有加namespace属性，则：
// State
state => {
A: 0,
B: 0,
}
// Actions
actions => {
A: { a_plus, a_minus },
B: { b_plus, b_minus }
}如果namespace = A，则：
// State
state => 0;
// Actions
actions => {
a_plus, a_minus;
};Model
| name | optional | type | default | desc |
|---|---|---|---|---|
| namespace | true | String | *DEFAULT_MODEL* | 模型的命名空间，不能重复 |
| state | true | any | 0 | 初始状态 |
| reducer | true | Object | { plus: state => state + 1 } | 无副作用动作 |
| effect | true | Object | null | 有副作用动作，必须是 async 方法 |
reducer
signature
(state, payload): state
- State: 当前的状态
- patload: 传入的数据
输出新的状态
effect
signature
(payload, actions, getState): void
- payload: 传入的数据
- actions: 所有已注册的模型的动作
- getState: 获取当前的 state 状态