Question

我现在使用getState获取一个clientId，我需要在每个api调用中包含。问题在于，clientId更改时，应用程序不会重新呈现，因此这会中断数据流。我是否必须在需要包含它的每个组件中手动获取clientId，还是有更好的选择？（clientId也在存储中，并且在用户登录时首先获取）

Answer 1

听起来像是使用Context的不错的选择。

这是一个虚拟的示例，该示例说明了如何设置较高级别的客户端ID，但可以在嵌套组件中引用它，而不必每次使用Hooks来查询Redux存储：

应用

const ClientContext = React.createContext(null);

function App(props) {
  return (
    <ClientContext.Provider value={props.clientId}>
      <MyApiComponent />
    </ClientContext>
  )
}

const mapStateToProps = getState => ({
  clientId: getState().clientId
})

export default connect(mapStateToProps, {})(App);

因此，我们只需要将App连接到商店以检索客户端ID，然后使用Context就可以使嵌套组件可以访问此值。我们可以利用useContext将该值提取到每个组件中

function MyApiComponent() {
  const clientId = useContext(ClientContext);
  ...
  return <MyNestedApiComponent />;
}

function MyNestedApiComponent() {
  const clientId = useContext(ClientContext);
  ...
}

无论您使用的是函数还是类组件，原理都是相同的-Context用于将全局状态共享到嵌套组件。

替代getState用于Redux中的循环变量

1 个答案: