Redux 中重复变量的 getState 替代方法

Question

我getState用来获取我现在需要在每个 api 调用中包含的 clientId 。问题是这会中断数据流，因为应用程序在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到 store 来检索客户端 ID，然后使用Context我们可以让嵌套组件访问这个值。我们可以利用useContext将该值拉入每个组件

function MyApiComponent() {

  const clientId = useContext(ClientContext);

  ...

  return <MyNestedApiComponent />;

}

function MyNestedApiComponent() {

  const clientId = useContext(ClientContext);

  ...

}

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