时间戳

首页 > 解决方案 > 如何将 React 16.3 上下文提供程序与 redux 存储一起使用？

reactjs - 如何将 React 16.3 上下文提供程序与 redux 存储一起使用？

问题描述

我在一个代码库中工作，该代码库已经有一堆 redux 用于管理和持久化状态，以及调度操作。我使用新的 Context API 的目标是摆脱将所有这些状态传递给各种组件而必须做的道具钻探，但保留现有代码以在 redux 中管理状态。

现在我已经删除了过多的道具钻取代码，并用上下文提供者和消费者替换它们，将它们连接到我的组件中所有正确的位置。我仍在向 redux 发送操作并获取填充我的 redux 存储的 API 响应，并且我想以某种方式通知上下文以在 redux 存储的特定部分更新时进行更新。

我如何从 redux 商店获取更新，并将其发送到我的不同 Providers？

标签： reactjsreduxreact-reduxreact-16

解决方案

由于您使用的是新的 Context Api，因此您可以轻松地connect使用Context Provider with redux 存储的组件并更新上下文值，例如

const Context = React.createContext();
class App extends React.Component {
   state = {
       user: ''
   }
   static getDerivedStateFromProps(nextProps, prevState) {
       if(nextProps.user !== prevState.user) {
          return {user: nextProps.user}
       }
       return null;
   }
   render() {
       return <Context.Provider value={this.state.user}>
           <MyComponent />
       </Context.Provider>
   }
}
const mapStateToProps(state) {
   return {
      user: state.user
   }
}
export default connect(mapStateToProps)(App);

推荐阅读