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

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

Redux

Внизу страницы: http://redux.js.org/docs/basics/UsageWithReact.html (Передача в магазин) рекомендуется использовать «Магию» React «Контекст».

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

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

Реагировать

На странице контекста React ( https://facebook.github.io/react/docs/context.html ) вверху отображается предупреждение:

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

Затем внизу:

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

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

Так...

Redux рекомендует использовать функцию «Контекст» React, а не передавать storeкаждому компоненту через «реквизиты». Хотя React рекомендует обратное.

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

• Я все это правильно читаю?
• Каков общий консенсус по этому вопросу ...?

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

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

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

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

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

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

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

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

Есть модуль npm, который упрощает добавление redux в контекст реакции.

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>
    );
  }
}