Зазвичай я розміщую матеріали, пов’язані з кодом, на Stack, але це більше питання про те, які загальні думки спільноти.

Здається, що багато людей виступають за використання Redux з React для управління даними / станом, але під час читання та вивчення обох я зіткнувся з чимось, що виглядає не зовсім правильно.

Redux

Внизу цієї сторінки: 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вниз кожному компоненту через 'props'. Тоді як React рекомендує протилежне.

Крім того, схоже, що Ден Абрамов (творець Redux) зараз працює на Facebook (творець React), просто щоб ще більше заплутати мене.

• Чи все це я правильно читаю ..?
• Який загальний поточний консенсус з цього питання ..?

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

Важливою частиною тут є слово бібліотеки . Якщо контекст змінює свою поведінку, нам як авторам бібліотек потрібно буде налаштуватися . Однак, поки бібліотека не просить вас безпосередньо використовувати контекстний API, вам як користувачеві не слід турбуватися про зміни в ньому.

React Redux використовує контекст внутрішньо, але не викриває цього в публічному API. Отже, ви повинні почуватись набагато безпечніше, використовуючи контекст через React Redux, ніж безпосередньо, тому що якщо він зміниться, тягар оновлення коду ляже на React Redux, а не на вас.

Зрештою React Redux все ще підтримує завжди передачу магазину як підставки, тому, якщо ви хочете повністю уникнути контексту, у вас є такий вибір. Однак я б сказав, що це недоцільно.

TLDR: Уникайте безпосереднього використання контексту, якщо ви насправді не знаєте, що робите. Використання бібліотеки, яка покладається на внутрішній контекст, є відносно безпечним.

Я не знаю про інших, але я віддаю перевагу використанню декоратора Connect-Rex для підключення моїх компонентів, щоб до мого компонента передавався лише потрібний мені реквізит з магазину. Це виправдовує використання контексту в певному сенсі, оскільки я його не споживаю (і я знаю, як правило, будь-який код, за який я відповідаю, не буде його споживати).

Коли я тестую свої компоненти, я тестую не обернутий компонент. Оскільки response-redux передав лише потрібний мені реквізит для цього компонента, тепер я точно знаю, який реквізит мені потрібен, коли я пишу тести.

Припускаю, що справа в тому, що я ніколи не бачу в своєму коді слова контексту, не вживаю його, тож певною мірою це не впливає на мене! Це нічого не говорить про "експериментальне" попередження Facebook. Якби контекст зник, я був би таким же, як і всі інші, поки Redux не оновився.

Існує модуль npm, який дозволяє дуже легко додати редукс до контексту реакції

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