使用独立的局部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>
  );
}