Установка контекста реагирования из ответа API - PullRequest
Новая
       22

Установка контекста реагирования из ответа API

0 голосов
/ 08 января 2019

У меня есть приложение, в котором после входа в систему регистрируются пользовательские данные, и некоторые профили пользователей будут иметь настройку метрики, а другие будут иметь неметрическую (имперскую).

Я хочу установить логическое значение (isMetric) в контексте React, так как есть компоненты без сохранения состояния, которые должны ссылаться на него, и я хочу избежать передачи пропуска isMetric по всей иерархии компонентов.

Я следовал примерам React 16 на https://reactjs.org/docs/context.html, поэтому у меня есть 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 и извлекает метрическую / неметрическую настройку пользователя.

Как только я получу данные пользователя, как я могу установить Context? (похоже, что у redux-saga есть собственный контекстный аспект, но я имею в виду React Context).

Один из вариантов - импортировать UnitContext с

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

, а затем получить доступ к Получателю, чтобы получить состояние и, следовательно, функцию. Но я не уверен, как ссылаться на то, что обычно было бы Компонентом в саге redux-saga, которая является императивным кодом.

В качестве альтернативы, можно ли переместить состояние приложения в режим редукции? Это кажется странным и необоснованным иметь функцию в магазине редуксов. Я знаю, что redux-saga предоставляет метод select для доступа к хранилищу при помощи селекторов, и я использовал его в прошлом.

Обновление:

Поскольку контекст предоставляется <UnitContext.Provider value={this.state}>, тогда, вероятно, я мог бы заменить это значение свойства значение на значение хранилища с избыточностью вместо использования локального состояния.

...