Javascript 从单个组件访问多个easy peasy存储

我试图在一个组件中访问两个不同的商店，但担心我的应用程序的架构可能需要更改，因为

easy peasy

可能没有此功能

我有一个

GlobalStore

import { createStore } from 'easy-peasy';

const globalModel = {
  menuOpen: false,
  toggleMenu: action((state, payload) => {
    state.menuOpen = payload;
  }),
};

const GlobalStore = createStore(globalModel);
export default GlobalStore;

const Close = styled.span`  
  $(({ menuOpen }) => menuOpen ? `
   // styles go here
  ` : `` }
`;

const setView = useStoreActions((action) => action.setView);
const menuOpen = useStoreState((state) => state.menuOpen);

<Close menuOpen={menuOpen} onClick={() => setView('list')}>

就本例而言，我将使用商店中使用的单个状态和操作来定义导航菜单是否打开

GlobalStore显示在我的

app.js

文件中我的应用程序的顶层

import React from 'react';
import { StoreProvider } from 'easy-peasy';
import GlobalStore from './store/GlobalStore';

const App = () => {
  return (
    <StoreProvider store={GlobalStore}>
    </StoreProvider>
  );
};

export default App;

我现在遇到的问题是，在一个组件中，我需要能够访问两个存储，以使用

SearchStore

中的

setView

操作更新视图，并从

GlobalStore

获取

menuOpen

的值，但不能同时访问这两个存储

我在组件中的示例是，我有一个样式化的组件，单击该组件时调用动作

setView

，但其位置也由

menuOpen

是否为

true

定义。但是很明显，如果我尝试获取

menuOpen

的状态，它将是未定义的，因为它不存在于

SearchStore

import { createStore } from 'easy-peasy';

const globalModel = {
  menuOpen: false,
  toggleMenu: action((state, payload) => {
    state.menuOpen = payload;
  }),
};

const GlobalStore = createStore(globalModel);
export default GlobalStore;

const Close = styled.span`  
  $(({ menuOpen }) => menuOpen ? `
   // styles go here
  ` : `` }
`;

const setView = useStoreActions((action) => action.setView);
const menuOpen = useStoreState((state) => state.menuOpen);

<Close menuOpen={menuOpen} onClick={() => setView('list')}>

const Close=styled.span`
$（{menuOpen}）=>menuOpen`
//风格就在这里
` : `` }
`;
const setView=useStoreActions（（action）=>action.setView）；
const menuOpen=useStoreState（（state）=>state.menuOpen）；
setView（'list'）}>

这可能吗？如果有任何帮助，我们将不胜感激。

备选方案1：扩展全球门店 要访问这两个存储（通过

StoreProvider

中的

useStoreState/Actions

），您可以将两个“子”存储嵌套到

GlobalStore

：

//SearchModel.js
从“easy peasy”导入{action}；
常数搜索模型={
视图：“过滤器”，
setView:操作（（状态、有效负载）=>{
state.view=有效载荷；
}),
};
导出默认搜索模型；

//MenuModel.js
从“easy peasy”导入{action}；
常量菜单模型={
伊索彭：错，
切换：操作（（状态、有效负载）=>{
state.isOpen=！state.isOpen；
}),
};
导出默认菜单模型；

//GlobalStore.js
从“easy peasy”导入{createStore}；
从“/MenuhModel”导入菜单；
从“./SearchModel”导入搜索；
常量全局模型={
菜单，
搜索，
};
const GlobalStore=createStore（globalModel）；
导出默认全局存储；

这样，您就可以方便地使用以下挂钩访问这两个商店：

const searchState=useStoreState（（state）=>state.search）；
const menuState=useStoreState（（state）=>state.menu）；
const searchActions=useStoreActions（（action）=>action.search）；
const menuActions=useStoreActions（（action）=>action.menu）；

备选方案2:

useLocalStore（）

如果不想扩展全局存储，可以使用以下命令创建本地存储：

功能菜单（）{
const[state，actions]=useLocalStore（（）=>({
伊索彭：错，
切换：操作（（状态、有效负载）=>{
state.isOpen=！state.isOpen；
}),
}));
返回(
{state.isOpen&&}
actions.toggle（）}>打开菜单
);
}

然而，这种方法的缺点是，状态不是全局的，仅在组件级别可用

---

不过，您可以通过创建自己的提供程序来解决这一问题，但同样，备选方案1可能是阻力最小的途径。

我不熟悉easy peasy，但总的来说，保留一个存储作为所有应用程序状态的中心存储库不是一个好主意吗？这是一个缺点准确地说，这是为了避免在应用程序中分散多个状态位持有者，这会使推理和预测应用程序变得比实际情况更困难…我的建议是，使用一个存储并将所有状态都放在其中…这听起来确实可能是目前最好的解决方案。但是，我担心将我的所有应用程序状态和操作放在一个地方，以便在任何地方都可以访问的任何潜在性能问题。通常，这是可维护性和潜在但不太可能出现的性能问题之间的折衷。除非你的应用程序真的处理大量数据，否则你不应该担心。如果不是这样的话尽管如此，如果您有性能问题（例如，太多频繁的重新渲染会明显降低您的ui速度），请查看

usemo

、

useCallback

以及为解决性能问题而提供的各种其他机制。