默认情况下,本节所有 API 的导出包名为:@modern-js/runtime/model
。
如果是在 Modern.js 以外单独集成 Reduck,导出包名为:@modern-js-reduck/react
。
Reduck 原始类型较为复杂,以下涉及类型定义的地方,展示的是简化后的类型信息。原始类型见 model。
用于创建管理应用状态的 Model。
function model(name: string): { define: function }
string
,创建的 Model 的唯一标识。model('foo');
用于定义 Model 的详细结构,支持传入一个对象类型或函数类型的参数。
function define(modelDesc: ModelDesc): Model;
ModelDesc
,对 Model 结构的定义,包含 state
、computed
、actions
、effects
等属性。const fooModel = model('foo').define({
state: 'foo',
computed: {
cFoo: state => `c${state}`,
},
actions: {
setState: (state, value) => {
return value;
},
},
effects: {
loadState: async () => {
// 从服务端获取 state
},
},
});
function define((context: Context, utils: Utils) => ModelDesc): Model;
store
对象。store
除支持 Redux Store 的所有 API 以外,还挂载了用于消费 Model 的 use
的方法,和用于卸载 Model 的 unmount
方法。use
、onMount
。use
作用同 store
对象上的 use
,onMount
是 Model 挂载后的钩子函数。interface Utils {
use: UseModel;
onMount: OnMountHook;
}
interface Context {
store: ReduxStore & {
use: UseModel;
unmount: (model: Model) => void;
};
}
如通过 use
,可以获取 Model 自身及其它 Model 的 state
,actions
。
const fooModel = model('foo').define(() => {
return {
state: 'foo',
actions: {
setState: (state, value) => {
return value;
},
},
};
});
const barModel = model('bar').define((_, { use }) => {
return {
state: 'bar',
effects: {
syncFoo() {
const [state, actions] = use(fooModel);
actions.setState(state);
},
},
};
});
定义 Model 的状态。技术上,支持任意类型的 State,但是实践中建议使用可进行 JSON 序列化的类型。
interface ModelDesc {
state: any;
}
定义 Model 的 Actions。Actions 的函数类型为:
interface ModelDesc {
actions: {
[actionKey: string]: (state: State, payload: any) => State | void;
};
}
Reduck 内部集成了 immer,可以直接原始的 state
,当 Action 没有显式返回值时,Reduck 内部会返回修改过的新的 State 对象。
定义 Model 的衍生状态。衍生状态的定义支持两种类型:
interface ModelDesc {
computed: {
[computedKey: string]: (state: State) => any;
};
}
interface ModelDesc {
computed: {
[computedKey: string]: [
...models: Model[],
(state: State, ...args: ModelState[]) => any,
];
};
}
const fooModel = model('foo').define({
state: 'foo',
});
const barModel = model('bar').define({
state: 'bar',
computed: {
combineFoo: [fooModel, (state, fooState) => state + fooState],
},
});
定义 Model 的 Effects。Effects 中定义的函数类型为:
interface ModelDesc {
effects: {
[effectKey: string]: (...args: any[]) => any;
};
}
const fooModel = model('foo').define((context, { use }) => ({
state: 'foo',
effects: {
persist() {
const [state] = use(fooModel);
localStorage.setItem('state', state);
},
},
}));