Question

我有一个应用程序，该应用程序在登录后会获取用户详细信息，一些用户个人资料将具有度量标准设置，而其他用户个人资料将具有非度量标准（英制）。

我想在React Context中设置一个布尔值（isMetric），因为到处都有无状态组件需要引用它，并且我想避免整个组件层次结构都传递一个isMetric属性。

我一直在关注https://reactjs.org/docs/context.html上的React 16示例，所以我有unit-context.js的情况：

export const UnitContext = React.createContext({
  isMetric: true,
  toggleUnits: () => {},
});

和{p}的App.js

import { UnitContext } from './unit-context';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.toggleUnits = () => {
      this.setState(state => ({
        isMetric: !state.isMetric
      }));
    };

    this.state = {
      isMetric: true,
      toggleUnits: this.toggleUnits,
    };
  }

  render() {
    return (
      <UnitContext.Provider value={this.state}>
        < ... />
      </UnitContext.Provider>
    );
  }
}

以上是在上下文本身中提供toggleUnits以便可以设置状态（上下文）的动态模式。

通过上述模式，我已经确认可以在组件中访问isMetric值。

但是我使用redux-saga处理api调用，并且它正在检索用户的指标/非指标设置。

获取用户详细信息后，如何设置上下文？（redux-saga似乎有它自己的上下文方面，但是我指的是React Context）。

一种选择是使用以下方式导入UnitContext

import { UnitContext } from '.unit-context';

，然后访问Consumer以获取状态以及功能。但是我不确定如何在redux-saga传奇中引用什么是命令性代码。

或者，我可以将App状态移动到redux吗？在redux存储中具有功能似乎很奇怪而且很不合理。我知道redux-saga提供了一种select方法来通过选择器访问redux存储，而我过去已经使用过。

更新：

由于<UnitContext.Provider value={this.state}>提供了上下文，因此可以想象，我可以将 value 属性设置替换为redux存储值，而不是使用本地状态。

从api响应设置React Context

0 个答案: