使用独立的局部Store
Redux的使用哲学是在一个应用中仅使用一个全局Store来存放应用中所有的State。这其实对于State的优化是一件非常不错的选择,但是在实际的应用开发中,常常会遇到有一些State只在组件树的一部分使用,并不需要或者并不能够将其提升到应用全局管理,亦或者有一些State需要同时存在若干个相同结构的不同实例。
这些额外的设计需求虽然违背了Redux的设计哲学,但是的确是应用的实际设计需要。Redux针对这种需要也设计了解决方案,而且实现过程也并不难以理解。
熟悉Angular或者后端开发的可能对依赖注入比较熟悉,实际上局部Store的使用与依赖注入是比较类似的,都是在需要的位置注入所需要的内容。要建立局部Store,主要是构建局部Store以及供其他组件使用的一系列Hooks。
构建局部Store并将局部Store注入到组件树与构建全局Store的方法并没有什么区别。只是Provider
组件出现的位置不同,在注入局部Store的时候,Provider
组件只需要包裹需要从其中获取State的组件树分支部分即可,并且还需要提供一个自定义的Context。
以下借用官网上提供的一个示例来说明局部Store的使用。
import React from 'react';
import { createDispatchHook, createSelectorHook, createStoreHook, Provider } from 'react-redux';
// 这个自定义的Context是用于携带Store的Context,必须与全局Context区分开。
const MyContext = React.createContext(null);
// 以下这些Hooks都是需要从自定义Store的文件中导出的。
// 虽然它们的名字与React Redux库中提供的标准Hooks相同,但是它们所获取的Context不同。
export const useStore = createStoreHook(MyContext);
export const useDispatch = createDispatchHook(MyContext);
export const useSelector = createSelectorHook(MyContext);
const myStore = createStore(rootReducer);
// 在需要注入局部Store的组件树分支根部,使用Provider组件和自定义的Context注入所需要注入的Store实例。
// 这样就可以在组件树的子代组件中使用上面自定义的Hooks操作局部Store了。
export function MyProvider({ children }) {
return (
<Provider context={MyContext} store={myStore}>
{children}
</Provider>
);
}