Kiedy używać state, a kiedy Redux?

wp-content/uploads/2017/10/React_logo_wordmark-300x101-1-e1508612391308.png
  1. Wprowadzenie do kursu React.js od podstaw
  2. Poznaj React.js
  3. Pierwszy komponent w React.js
  4. Props czyli atrybuty w React.js
  5. Podział na komponenty w React.js
  6. Klasy jako komponenty React.js
  7. Interakcja z komponentami React.js
  8. Stan komponentów React.js
  9. State w React.js 2
  10. Metody cyklu życia komponentu w React.js
  11. React.js w przykładach: filtrowanie statycznej listy
  12. Tworzenie aplikacji React.js dzięki create-react-app
  13. React.js na GitHub Pages dzięki create-react-app
  14. Testowanie aplikacji React.js — podstawy Enzyme
  15. Testowanie React.js w Enzyme — props, state i interakcje
  16. Poprawne bindowanie funkcji w React.js
  17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
  18. Komunikacja pomiędzy komponentami w React.js
  19. Komunikacja z API w React.js
  20. Formularze w React.js — kontrolowane komponenty
  21. Formularze w React.js — niekontrolowane komponenty
  22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
  23. TDD w React.js z pomocą react-testing-library
  24. Flux i Redux
  25. React + Redux — kurs: wprowadzenie i podstawy
  26. React + Redux — filtrowanie listy, proste selektory
  27. Projektowanie komponentów: Presentational & Container Components
  28. Asynchroniczność w Redux: redux-thunk
  29. Kiedy używać state, a kiedy Redux?
  30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
  31. Leniwe ładowanie komponentów w React dzięki import
  32. Higher Order Reducers — Redux i powtarzanie kodu
  33. React Hooks — wprowadzenie i motywacja
  34. React Hooks: useState, czyli stan w komponentach funkcyjnych
  35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
  36. React Hooks: useEffect — efekty uboczne w komponencie
  37. React Hooks a żądania do API
  38. useReducer — przenoszenie logiki poza komponent
  39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami

Bardzo często osoby poznające bibliotekę Redux próbują przenieść cały stan każdego komponentu do Reduksowego store’a. Czy to ma sens? Czy powinnaś całkowicie przestać używać setState?

Nie ma nic złego w state

Naprawdę. Nie ma nic złego w używaniu setState.

Ale kiedy użyć setState, a kiedy Reduksa? W podjęciu decyzji może Cię wspomóc lista pytań pomocniczych. Znajdziesz je poniżej!

Czy te dane dotyczą tylko jednego komponentu czy kilku?

Prosta sprawa: Czy dane są wynikiem pracy z jednym komponentem, czy też są „zbierane” z kilku? Ale także czy w przyszłości się to zmieni?

Stan budowany na podstawie informacji z pojedynczego komponentu może być po prostu jego state.

Czy używasz danych i przekazujesz je do wielu komponentów?

A teraz czy dane z komponentu będą używane przez wiele komponentów? W różnych częściach aplikacji? Czy potencjalnie mogą być potrzebne gdzieś poza ścisłym sąsiedztwem tego komponentu?

Jeśli korzystasz z tych samych informacji w wielu miejscach to, chociażby ze względu na wygodę, mogą być one w storze. Jeśli nie — może być state.

Czy na podstawie tych danych wyliczasz jakieś inne wartości?

Przykładowo, masz listę kontaktów. Czy będziesz potrzebowała listy „ulubionych kontaktów”? Jedna bez wątpienia ma związek z drugą. Nie ma sensu duplikować pełnych informacji o kontaktach. Ale trudno byłoby to zrealizować w oparciu o lokalny state — a więc raczej Redux 🙂

Czy przydatne może być zapisanie i odtworzenie tych danych, np. w celu debugowania?

Są takie newralgiczne miejsca w aplikacji, które są podatne na błędy. Wymodelowanie przepływu danych w takich miejscach z użyciem reducerów zdecydowanie ułatwi Ci zrozumienie i naprawienie ewentualnych bugów w przyszłości. Dodatkowo, w celu odtworzenia błędu, możesz logować wszystkie akcje, które wykonuje użytkownik — a następnie łatwo je odtworzyć!

Czy chcesz cache’ować te dane, aby były zachowane np. po przeładowaniu strony przez użytkownika?

Cache każdego stanu lokalnego komponentu rzadko ma sens. Ale już stanu globalnego aplikacji tak. W przypadku użycia Reduksa jest to także banalnie łatwe! Zastanów się czy teraz lub w przyszłości Twoje dane powinny się zapisywać (np. w localStorage) czy nie.

To Redux czy state?

To tylko pomocnicza lista. Żadna z odpowiedzi nie jest definitywna, ale może skłaniać Cię w kierunku podjęcia takiej lub innej decyzji. Zapamiętaj jedno: nie ma nic złego w setState, także gdy używasz Reduksa. Poznaj React i Redux na szkoleniu!

Jeśli chcesz na bieżąco dowiadywać się o kolejnych częściach kursu React.js to koniecznie śledź mnie na Facebooku i zapisz się na newsletter.

Nawigacja po kursie:
  1. Wprowadzenie do kursu React.js od podstaw
  2. Poznaj React.js
  3. Pierwszy komponent w React.js
  4. Props czyli atrybuty w React.js
  5. Podział na komponenty w React.js
  6. Klasy jako komponenty React.js
  7. Interakcja z komponentami React.js
  8. Stan komponentów React.js
  9. State w React.js 2
  10. Metody cyklu życia komponentu w React.js
  11. React.js w przykładach: filtrowanie statycznej listy
  12. Tworzenie aplikacji React.js dzięki create-react-app
  13. React.js na GitHub Pages dzięki create-react-app
  14. Testowanie aplikacji React.js — podstawy Enzyme
  15. Testowanie React.js w Enzyme — props, state i interakcje
  16. Poprawne bindowanie funkcji w React.js
  17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
  18. Komunikacja pomiędzy komponentami w React.js
  19. Komunikacja z API w React.js
  20. Formularze w React.js — kontrolowane komponenty
  21. Formularze w React.js — niekontrolowane komponenty
  22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
  23. TDD w React.js z pomocą react-testing-library
  24. Flux i Redux
  25. React + Redux — kurs: wprowadzenie i podstawy
  26. React + Redux — filtrowanie listy, proste selektory
  27. Projektowanie komponentów: Presentational & Container Components
  28. Asynchroniczność w Redux: redux-thunk
  29. Kiedy używać state, a kiedy Redux?
  30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
  31. Leniwe ładowanie komponentów w React dzięki import
  32. Higher Order Reducers — Redux i powtarzanie kodu
  33. React Hooks — wprowadzenie i motywacja
  34. React Hooks: useState, czyli stan w komponentach funkcyjnych
  35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
  36. React Hooks: useEffect — efekty uboczne w komponencie
  37. React Hooks a żądania do API
  38. useReducer — przenoszenie logiki poza komponent
  39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami