javascript - 替代 getState 用于 Redux 中的重复变量

Question

我使用 getState 获取我需要立即包含在每个 api 调用中 的 clientId。问题是这会中断数据流，因为当 clientId 更改时应用程序不会重新呈现。我是否必须在每个需要包含它的组件中手动获取 clientId，或者是否有更好的选择？ (clientId也在store中，在用户登录时首先获取)

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 用于将全局状态共享到嵌套组件。