Provider 与状态隔离
为组件作用域的 store 创建上下文 Provider
为什么使用 Provider？
Provider 可以用来创建组件隔离的 store 实例，非常适合独立状态的组件。
比如弹窗、Tabs 或任何多次出现的组件。
创建 Provider
你可以使用 createProvider 创建 Provider。
它返回一个 Provider 组件、一个获取 store 实例的 hook 和获取当前 store 的操作方法。
const [Provider, useFindStore, storeActions] = createProvider(initialState);举个例子：
const [CounterStoreProvider, useFindCounterStore, storeActions] =
createProvider({
count: 0,
increment() {
// 使用 `getState` 获取当前状态
const state = storeActions.getState();
// 使用 `setState` 设置新状态
storeActions.setState({
...state,
count: state.count + 1,
});
},
});注意：
storeActions只能在初始状态的方法中访问，不应该导出给外部使用- 你可以使用
useFindStore从 Provider 获取 store 实例 - 这与 Vue 的
provide/inject模式非常相似
初始化 Provider
你可以向不同的 Provider 传递不同的初始值（可选），它们彼此隔离。
function App() {
return (
<Tabs>
<CounterStoreProvider initialState={{ count: 100 }}>
<Counter />
</CounterStoreProvider>
<CounterStoreProvider initialState={{ count: 200 }}>
<Counter />
</CounterStoreProvider>
</Tabs>
);
}使用 Provider 中的 Store 实例
function Counter() {
// 首先，从 Provider 获取 store 实例
const counterStore = useFindCounterStore();
// 然后，像普通 store 一样使用即可
const { count } = useStore(counterStore);
return (
<>
<p>计数: {count}</p>
<button onClick={counterStore.value.increment}>增加</button>
</>
);
}