Reagować z Redux? A co z kwestią „kontekstu”?

90

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…?
Stephen Last
źródło
8
Ach, to świetne pytanie, jestem bardzo ciekawa opinii innych! Obawiam się, że zostanie zamknięty ze względu na aspekt dyskusji. Naprawdę mam taką nadzieję.
mjohnsonengr,

Odpowiedzi:

90

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.

Dan Abramov
źródło
1
Dobrze powiedziany Dan. Ryzyko polega na tym, że jeśli React całkowicie usunie kontekst w przyszłej wersji, prawdopodobnie będzie wymagał przeróbek w celu zaktualizowania dowolnej istniejącej aplikacji Redux. Jest mało prawdopodobne, aby Redux był w stanie chronić użytkowników przed taką zmianą. Biorąc pod uwagę, że jesteś teraz z Facebookiem, dobrą wiadomością jest to, że spodziewam się, że będziesz miał dużo wcześniejszego powiadomienia, jeśli kontekst kiedykolwiek zniknie.
Cory House
6
React nie usunie kontekstu. Mam na myśli, że jest to technicznie możliwe, ale cały powód, dla którego istnieje, jest taki, że wiele produktów wewnątrz FB tego potrzebowało. Więc jeśli nie ma równoważnego rozwiązania, nie zniknie. Ale jego dokładny interfejs API może się zmienić, przed czym chronimy użytkowników.
Dan Abramov,
5
Kolejną ważną uwagą jest to, że React planuje w przyszłości raczej używać kontekstu. Uważamy, że może się przydać do stylizacji, animacji, obsługi gestów itp.
Dan Abramov
Warto jednak zauważyć, że kiedy dostajesz biblioteki komponentów React (np. Material-ui), to naturalnie nie będą one stanowić części twojego modelu stanu aplikacji, ale nadal są drzewem komponentów Reacta tak samo, z tymi samymi wymaganiami utrzymywanie własnego modelu stanu i przepływu danych oddzielnie od „głównej” aplikacji. Dlatego używają funkcji kontekstu jako jedynego środka (dla nich) do przekazywania danych do ich hierarchii potomnej.
stephenwil
1
@DanAbramov a co z nowym kontekstowym API? Czy nadal nie zaleca się używania?
Stanislav Mayorov
4

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.

mjohnsonengr
źródło
Interesujące ... Rozumiem, co masz na myśli, mówiąc o używaniu „reaktywacji” Provideri connectabstrahowaniu od wszystkich elementów kontekstu. Myślę, że z Danem Abramovem, który jest teraz na FB, można mieć nadzieję, że gdyby Context zmienił Redux i 'reakcja-redux' zostałby zaktualizowany ... Ale nie ma żadnych gwarancji, a "eksperymentalne" ostrzeżenie FB wciąż jest widoczne dla wszystkich.
Stephen Last
Z pewnością mam nadzieję, że jeśli FB nie będzie na bieżąco informować o reakcji-redukcji na wypadek, gdyby coś stało się z kontekstem, współpracownik open-source bardziej zaznajomiony z Reduxem niż ja to zrobię; jeśli nie, wymyślę to i zrobię to sam!
mjohnsonengr,
Poprosiłem Dana o jego przemyślenia przez Twittera ... Dobra odpowiedź, podobnie ... Skorzystaj z biblioteki używającej kontekstu, nie używaj go bezpośrednio.
Stephen Last
1

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>
    );
  }
}
Jam Risser
źródło