0

我有一些来自服务器的参数，我的 Zusand 存储需要使用这些参数才能正确实例化。

import create from 'zustand';

export const useStore = (serverId, arr) => {
  return create((set, get) => ({
    item1: true,
    exampleFunction: () => {
  // make API call that needs the serverId to make the request
}
  }))
}

为了得到serverIdand arr，我从连接到应用程序的组件中传递它，以便在首次加载时接收服务器数据。

export const Application = ({ serverId, arr }) => {
  const [myStore] = useState(() => {
    useStore(serverId, arr);
  });


  const {
    item1
  } = myStore(
    state => ({
      item1: state.item1,
    })
  );
};

return <DisplayComponent item1={item1} />
}

我想避免对我的其他组件进行道具钻探，所以我的想法是创建一个上下文提供程序来实例化 Zusand 状态，并通过将其包装在 Provider 中并提供我需要的一切来使其可用于所有组件。

我唯一的问题是我很难找出用 React 上下文提供者模式实例化 Zusand 存储的最佳方法，主要是因为我依赖初始服务器道具来运行 useStore。

要创建这样的提供者和上下文，它看起来像这样（例如，在 store.js 文件中）：

export const MyContext = createContext({
  example1: false,
  someFunction: () => {}
});

export const useStore = (serverId, arr) => {
  return create((set, get) => ({
    item1: true,
    exampleFunction: () => {
  // make API call that needs the serverId to make the request
}
  }))
}

export const Provider = ({ children }) => {
  const store = useStore(serverId, arr); // <==== HOW DO I GET THE SERVER DATA/ARGS FROM MY MAIN COMPONENT TO A PROVIDER LIKE THIS

  return (
    <MyContext.Provider
    >
      {children}
    </MyContext.Provider>
  );
};

所以我的问题是，设置它的最佳方法是什么，以便我可以在我上面勾勒的提供程序中拥有serverId和可用？arr也许这是一个完全不同的设计？

任何帮助将非常感激。

4

0 回答 0