默认情况下,本节所有 API 的导出包名为:@modern-js/runtime/model
。
如果是在 Modern.js 以外单独集成 Reduck,导出包名为:@modern-js-reduck/react
。
Reduck 原始类型较为复杂,以下涉及类型定义的地方,展示的是简化后的类型信息。原始类型见 model。
function useModel(
models: Models[],
stateSelector?: StateSelector,
actionSelector?: ActionSelector,
): [state, actions, subscribe];
function useModel(
...models: Models[],
stateSelector?: (...args: State[]) => any,
actionSelector?: (...args: Actions[]) => any,
): [state, actions, subscribe];
useModel
返回值数组的第一个元素。useModel
返回值数组的第二个元素。返回一个数组,每一项元素分别为:
stateSelector
的返回值。如果未传 stateSelector
,会把传入的所有 Model 的 State (包含衍生状态)合并后返回。如果不同 Model 的 State 中存在同名属性,后面的 State 会覆盖前面的 State。当 state
发生变化时,调用 useModel
的组件会重新渲染。actionSelector
的返回值。如果未传 actionSelector
,会把传入的所有 Model 的 Actions (包含 Effects) 合并后返回。如果不同 Model 的 Actions 中存在同名属性,后面的 Actions 会覆盖前面的 Actions。import todoModel from 'models/todo';
import filterModel from 'models/filter';
function Test(props) {
const [state, actions] = useModel([todoModel, filterModel]);
actions.add(); // 调用 todoModel add action
actions.setVisibleStatus(); // 调用 filterModel filterModel action
state.items; // 获取 todoModel state items
state.visibleStatus; // 获取 filterModel state visibleStatus
}
function Test(props) {
const [state, actions] = useModel(
[todoModel, filterModel],
(todoState, filterState) => ({
items: todoState.items,
visibleStatus: `${props.prefix}-${filterState.visibleStatus}`,
}),
(todoActions, filterActions) => ({
...todoActions,
...filterActions,
}),
);
actions.add(); // 调用 todoModel add action
actions.setVisibleStatus(); // 调用 filterModel filterModel action
state.items; // 获取 todoModel state items
state.visibleStatus; // 获取 filterModel state visibleStatus
}