0

我有一个应用程序，登录后会获取用户详细信息，并且一些用户配置文件将具有公制设置，而其他用户配置文件将具有非公制（英制）。

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

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

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

和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 上下文）。

一种选择是使用

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

然后访问消费者以获取状态和功能。但我不确定如何在 redux-saga 传奇中引用通常是组件的命令式代码。

或者，我可以将 App 状态移动到 redux 吗？在 redux 商店中拥有一个功能似乎很奇怪和不合理。我知道 redux-saga 提供了select一种通过选择器访问 redux 存储的方法，我过去曾使用过它。

更新：

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

4

0 回答 0