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

Question

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

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

我如何从 redux 商店获取更新并传送到我的不同提供商？

Answer 1

由于您使用的是新的 Context Api，因此您可以轻松地连接使用 Context Provider 的组件与 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);