我使用 getState
获取我需要立即包含在每个 api 调用中 的 clientId。问题是这会中断数据流,因为当 clientId
更改时应用程序不会重新呈现。我是否必须在每个需要包含它的组件中手动获取 clientId,或者是否有更好的选择? (clientId也在store中,在用户登录时首先获取)
最佳答案
听起来很适合使用 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
用于将全局状态共享到嵌套组件。
关于javascript - 替代 getState 用于 Redux 中的重复变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56666145/