React-Redux Łatwe wyjaśnienie (2/2)

W poprzednim artykule, który napisałem, omówiłem cykl Redux. Ten artykuł skupi się na React-Redux. Po pierwsze, dlaczego React-redux? W miarę dalszej pracy nad aplikacją zarządzanie stanem może stać się bardzo skomplikowane. React-Redux to system zarządzania stanem, który ułatwia zarządzanie stanem.

Schemat działania React-Redux:

Jeśli chcesz utworzyć akcję lub reduktor , najlepiej jest utworzyć foldery o nazwach Akcje i Reduktory na najwyższym poziomie folderu src . Wewnątrz obu folderów utwórz plik index.js . Teraz powinieneś mieć w sumie 3 pliki index.js .

W początkowym pliku index.js , do którego dołączasz plik App.js , import {Provider} from 'react-redux'oraz import {createStore} from 'redux'. Zapakuj swój komponent aplikacji w dostawców w następujący sposób:

Teraz wiele z twojego schematu jest już skończonych. Stąd możesz tworzyć swoje działania. wewnątrz pliku index.js w folderze działań, proces jest dokładnie taki, jak pokazano wcześniej, z wyjątkiem wcześniejszej instrukcji eksportu . Ważne jest, aby wiedzieć, że nie powinieneś używać domyślnego eksportu.

W swoim pliku reduktorów import {combineReducers} from 'redux'i utwórz swoje reduktory. Różnica polega na domyślnym eksporcie reduktorów .:

Wcześniejsze informacje były w zasadzie podsumowaniem i integracją reduktorów z Reactem, ta sekcja obejmie kilka rażących różnic:

Niezależnie od tego, który plik chcesz wywołać State, musisz najpierw import {connect} from 'react-redux'połączyć go z domyślnym eksportem w ten sposób:

mapStateToProps to funkcja, która również wchodzi do twojego łącznika , aby użyć twojego stanu wewnątrz komponentu. Jego zadaniem jest tak, jak mówi jego tytuł, w twoim komponencie, będziesz musiał użyć Rekwizytów, aby uzyskać dostęp do stanu za pomocą wybranego klucza. ważne jest również, aby pamiętać, że funkcja connect automatycznie wysyła.

Wreszcie, należy połączyć funkcję createstore do operatora, aby umożliwić złącze do komunikacji z Dostawcą więc może wysyłać informacje do aplikacji.

Teraz możesz tworzyć aplikacje tak, jak kiedyś, z wyjątkiem React-Redux.