跳转到主文档

在 React 组件外使用 Model

在实际业务场景中,我们可能需要在 React 组件外消费 Model。例如在工具函数中访问 state、执行 actions 等。这一节我们将演示如何在 React 组件外使用 Model。

创建 Store

首先需要创建一个 Store 对象,然后通过 Store 加载 Model。

const store = createStore();

这样我们就创建了一个 Store,底层使用的是 Redux Store,所以你可以使用它的任何方法,如 getState。 同时我们也兼容 Redux 丰富的中间件生态,可以在创建 Store 的时候传入 Redux 中间件:

const store = createStore({
middlewares: [someMiddleware]
});

使用 Store 加载 Model

上面我们创建了 Store,接下来我们可以通过 store.use 函数将 countModel 挂载到 store 上。

例如:

const [state, actions, subscribe] = store.use(countModel);

subscribe(() => {
console.log('state changed', store.use(countModel)[0]); // state changed {value: 2}
});

console.log(state); // {value: 1}

actions.add();

console.log(store.use(countModel)[0]); // {value: 2}

代码依次打印:

{value: 1}
state changed {value: 2}
{value: 2}

store.use 返回 stateactionssubscribe

  • state: 该 Model 的状态。
  • actions: 修改 Model 状态的操作。
  • subscribe: 用于监听 Model 更新的函数。

在计数器应用中使用

接下来,我们在计数器应用中,演示如何在组件外使用 Model。我们删除手动点击 add 按钮增加计数器值,而是在组件外通过一个定时任务每隔一秒钟自增一。

import { useModel, createStore, Provider } from "@modern-js/runtime/model";
import countModel from "./models/count";

const store = createStore();

const [, actions] = store.use(countModel);

setInterval(() => {
actions.add();
}, 1000)

function Counter() {
const [state, actions] = useModel(countModel);

return (
<div>
<div>counter: {state.value}</div>
</div>
);
}

export default function App() {
return (
<Provider store={store}>
<Counter />
</Provider>
);
}

主要步骤总结如下:

  • 使用 createStore 创建 store
  • 使用 store.use(countModel) 挂载 countModel,并获取 stateactions
  • 使用 Provider 组件包裹 Counter 组件,并传入上面创建的 store

最终效果如下:

counter-model-outof-react

补充信息

本节完整的示例代码:章节示例代码

  • 相关 API 的更多介绍,请参考这里