Zwykle wysyłam na Stack rzeczy związane z kodem, ale jest to raczej pytanie o ogólne myśli społeczności.

Wydaje się, że wiele osób opowiada się za używaniem Reduxa z Reactem do zarządzania danymi / stanem, ale czytając i ucząc się obu, natknąłem się na coś, co nie wygląda dobrze.

Redux

Na dole tej strony: http://redux.js.org/docs/basics/UsageWithReact.html (Przekazywanie sklepu) zaleca używanie „Magii” React 'Context'.

Jedną z opcji byłoby przekazanie go jako rekwizytu do każdego komponentu kontenera. Jednak staje się to uciążliwe, ponieważ musisz przechowywać okablowanie nawet za pomocą komponentów prezentacyjnych tylko dlatego, że zdarzyło się, że renderują one kontener głęboko w drzewie komponentów.

Zalecaną opcją jest użycie specjalnego komponentu React Redux, który w magiczny sposób udostępni sklep wszystkim komponentom kontenerów ...

Reagować

Na stronie React Context ( https://facebook.github.io/react/docs/context.html ) znajduje się ostrzeżenie u góry:

Kontekst to zaawansowana i eksperymentalna funkcja. API prawdopodobnie ulegnie zmianie w przyszłych wersjach.

Następnie na dole:

Tak jak podczas pisania czystego kodu najlepiej unikać zmiennych globalnych, w większości przypadków należy unikać kontekstu ...

Nie używaj kontekstu do przekazywania danych modelu przez komponenty. Wątkowanie danych w drzewie jest znacznie łatwiejsze do zrozumienia ...

Więc...

Redux zaleca używanie funkcji React 'Context' zamiast przekazywania storewzdłuż do każdego komponentu poprzez 'props'. Podczas gdy React zaleca coś przeciwnego.

Wygląda też na to, że Dan Abramov (twórca Redux) pracuje teraz dla Facebooka (twórca Reacta), żeby mnie bardziej zmylić.

• Czy czytam to wszystko dobrze ..?
• Jaki jest obecnie ogólny konsensus w tej sprawie…?

Kontekst to zaawansowana funkcja, która może ulec zmianie. W niektórych przypadkach jego zalety przeważają nad wadami, więc niektóre biblioteki, takie jak React Redux i React Router, decydują się na nim polegać pomimo eksperymentalnego charakteru.

Ważną częścią są tutaj biblioteki słów . Jeśli kontekst zmieni swoje zachowanie, my, autorzy bibliotek, będziemy musieli się dostosować . Jednak dopóki biblioteka nie poprosi Cię o bezpośrednie użycie kontekstowego API, Ty jako użytkownik nie powinieneś martwić się o zmiany w nim.

React Redux używa kontekstu wewnętrznie, ale nie ujawnia tego faktu w publicznym API. Więc powinieneś czuć się znacznie bezpieczniej, używając kontekstu przez React Redux niż bezpośrednio, ponieważ jeśli to się zmieni, ciężar aktualizacji kodu będzie spoczywał na React Redux, a nie na tobie.

Ostatecznie React Redux nadal obsługuje przekazywanie sklepu jako rekwizytu, więc jeśli chcesz całkowicie uniknąć kontekstu, masz wybór. Jednak powiedziałbym, że jest to niepraktyczne.

TLDR: Unikaj bezpośredniego używania kontekstu, chyba że naprawdę wiesz, co robisz. Korzystanie z biblioteki, która zdarza się wewnętrznie opierać się na kontekście, jest stosunkowo bezpieczne.

Nie wiem o innych, ale wolę używać dekoratora connect firmyreak-redux do owijania moich komponentów tak, aby tylko rekwizyty z potrzebnego sklepu były przekazywane do mojego komponentu. Uzasadnia to stosowanie kontekstu, w pewnym sensie, bo ja nie jestem jego spożywania (a wiem, co do zasady, każdy kod, że jestem odpowiedzialny za o nie będzie zużywać).

Kiedy testuję swoje komponenty, testuję komponent niezawinięty. Ponieważ reakcja-redux zdała tylko rekwizyty, których potrzebowałem w tym elemencie, teraz dokładnie wiem, jakich rekwizytów potrzebuję, kiedy piszę testy.

Chyba chodzi o to, że nigdy nie widzę kontekstu słowa w moim kodzie, nie konsumuję go, więc do pewnego stopnia nie ma to na mnie wpływu! To nie mówi nic o „eksperymentalnym” ostrzeżeniu Facebooka. Gdyby kontekst zniknął, byłbym tak samo schrzaniony, jak wszyscy inni, dopóki Redux nie zostanie zaktualizowany.

Istnieje moduł npm, który bardzo ułatwia dodawanie redux do kontekstu reakcji

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