Реагируют с возвращением? А как насчет проблемы "контекста"?

Я обычно размещаю связанные с кодом вещи в стеке, но это больше вопрос о том, каковы общие мысли сообщества.

Кажется, что многие люди выступают за использование Redux с React для управления данными / состоянием, но во время чтения и обучения я столкнулся с чем-то, что не совсем правильно выглядит.

возвращение

внизу этой страницы:http://redux.js.org/docs/basics/UsageWithReact.html (проходя мимо магазина) он рекомендует использовать "магию" React 'Context'.

одним из вариантов было бы передать его в качестве опоры для каждого компонента контейнера. Однако это становится утомительным, так как вам нужно подключить хранилище даже через презентационные компоненты только потому, что они отображают контейнер глубоко в дереве компонентов.

рекомендуется использовать специальный компонент React Redux, призванный волшебным образом сделать хранилище доступным для всех контейнеров комплектующие...

реагировать

на странице React Context (https://facebook.github.io/react/docs/context.html) он имеет предупреждение в верхней части:

контекст-это расширенная и экспериментальная функция. API, вероятно, изменится в будущих версиях.

внизу:

так же, как глобальные переменные лучше избегать при написании четкого кода, Вы должны избегать использования контекста в большинстве случаи...

Не используйте контекст для передачи данных модели через компоненты. Поток данных через дерево явно гораздо легче понять...

так...

Redux рекомендует использовать функцию React 'Context' вместо передачи store вдоль вниз к каждому компоненту через "реквизит". В то время как React рекомендует обратное.

кроме того, похоже, что Дэн Абрамов (создатель Redux) теперь работает на Facebook (создатель Реагируют), просто чтобы запутать меня еще больше.

  • я все это правильно читаю..?
  • каков общий текущий консенсус по этому вопросу..?
3 76
javascript reactjs redux

3 ответа:

контекст является расширенной функцией и может быть изменен. В некоторых случаях его удобства перевешивают его недостатки, поэтому некоторые библиотеки, такие как React Redux и React Router, предпочитают полагаться на него, несмотря на экспериментальный характер.

важной частью здесь является слово библиотеки. Если контекст изменяет свое поведение,нам как авторам библиотеки нужно будет настроить. Однако до тех пор, пока библиотека не попросит вас напрямую использовать контекстный API, вы как пользователь не стоит беспокоиться об изменениях в нем.

React Redux использует контекст внутри, но он не раскрывает этот факт в общедоступном API. Таким образом, вы должны чувствовать себя намного безопаснее, используя контекст через React Redux, чем напрямую, потому что если он изменится, бремя обновления кода будет лежать на React Redux, а не на вас.

в конечном счете React Redux по-прежнему поддерживает всегда проходящий магазин в качестве опоры, поэтому, если вы хотите полностью избежать контекста, у вас есть этот выбор. Однако я бы сказал, что это непрактичный.

TLDR: избегайте прямого использования контекста, если вы действительно не знаете, что делаете. Использование библиотеки, которая внутренне зависит от контекста, относительно безопасно.

80

Я не знаю о других, но я предпочитаю использовать React-redux's connect decorator, чтобы обернуть мои компоненты так, чтобы только реквизит из магазина, который мне нужен, передавался в мой компонент. Это оправдывает использование контекста в некотором смысле, потому что Я не потребляю его (и я знаю, как правило, любой код, за который я отвечаю, не будет его потреблять).

когда я тестирую свои компоненты, я тестирую не завернутый компонент. Потому что react-redux только передал реквизит, который мне был нужен компонент, теперь я точно знаю, какой реквизит мне нужен, когда я пишу тесты.

Я полагаю, дело в том, что я никогда не вижу контекст слова в своем коде, я не потребляю его, поэтому в определенной степени это не влияет на меня! Это ничего не говорит о "экспериментальном" предупреждении Facebook.. Если контекст исчезнет, я буду так же облажался, как и все остальные, пока Redux не будет обновлен.

4

есть модуль npm, который позволяет очень легко добавить redux в контекст react

https://github.com/jamrizzi/redux-context-provider

https://www.npmjs.com/package/redux-context-provider

import React, { Component } from 'react';
import ReduxContextProvider from 'redux-context-provider';
import createStore from './createStore';
import actions from './actions';
import Routes from './routes';

export default class App extends Component {
  render() {
    return (
      <ReduxContextProvider store={store} actions={actions}>
        <Routes />
      </ReduxContextProvider>
    );
  }
}
1