Próbuję zrozumieć metodę Connect Re-Redux i funkcje, które przyjmuje jako parametry. W szczególności mapStateToProps()
.
W moim rozumieniu zwracana wartość mapStateToProps
będzie obiektem pochodzącym ze stanu (w postaci, w jakiej znajduje się on w sklepie), którego klucze zostaną przekazane do komponentu docelowego (do którego zostanie zastosowane połączenie) jako rekwizyty.
Oznacza to, że stan wykorzystany przez komponent docelowy może mieć zupełnie inną strukturę niż stan przechowywany w sklepie.
P: Czy to w porządku?
P: Czy jest to oczekiwane?
P: Czy to jest anty-wzór?
javascript
reactjs
redux
react-redux
Pablo Barría Urenda
źródło
źródło
this.props.someData
a niethis.props.someKey[someOtherKey].someData
... mieć sens?Odpowiedzi:
P:
Is this ok?
O: tak
P:
Is this expected?
Tak, jest to oczekiwane (jeśli używasz React-Redux).
P:
Is this an anti-pattern?
O: Nie, to nie jest anty-wzór.
Nazywa się to „podłączeniem” komponentu lub „uczynieniem go inteligentnym”. To jest z założenia.
Pozwala oddzielić swój komponent od stanu o dodatkowy czas, co zwiększa modułowość kodu. Pozwala także uprościć stan komponentu jako podzbiór stanu aplikacji, co w rzeczywistości pomaga zachować zgodność ze wzorcem Redux.
Pomyśl o tym w ten sposób: sklep powinien zawierać cały stan twojej aplikacji.
W przypadku dużych aplikacji może zawierać dziesiątki właściwości zagnieżdżonych w wielu warstwach.
Nie chcesz przewozić wszystkiego podczas każdego połączenia (drogie).
Bez niego
mapStateToProps
lub jakiejś jego analogii pokusiłbyś się o wyrzeźbienie swojego stanu w inny sposób na poprawę wydajności / uproszczenie.źródło
(1) -
Łatwiejszy głęboki dostęp(2) -
Unikaj błędów, w których komponent może zepsuć stan, który do niego nie należyTak, to jest poprawne. Jest to tylko funkcja pomocnicza, która pozwala na łatwiejszy dostęp do właściwości stanu
Wyobraź sobie, że masz
posts
klucz w swojej aplikacjistate.posts
I komponent
Posts
Domyślnie
connect()(Posts)
wszystkie rekwizyty stanu będą dostępne dla podłączonego komponentuTeraz, gdy mapujesz na
state.posts
swój komponent, robi się to trochę ładniejmapDispatchToProps
normalnie musisz pisać
dispatch(anActionCreator())
z
bindActionCreators
tobą możesz to zrobić również łatwiejTeraz możesz go używać w swoim Komponencie
Aktualizacja na ActionCreators ..
Przykład działania ActionCreator:
deletePost
Więc
bindActionCreators
po prostu podejmie twoje działania,dispatch
zawinie je w wezwanie. (Nie przeczytałem kodu źródłowego redux, ale implementacja może wyglądać mniej więcej tak:źródło
dispatch => bindActionCreators({fetchPosts, deletePost}, dispatch)
bierze sięfetchPosts
i jakiedeletePost
działania są przekazywane?state => state.posts
(mapStateToProps
funkcja) powie Reactowi, które stany spowodują ponowne renderowanie komponentu po aktualizacji.Masz pierwszą część rację:
Tak,
mapStateToProps
ma stan Store jako argument / parametr (dostarczony przezreact-redux::connect
) i jest używany do łączenia komponentu z pewną częścią stanu sklepu.Przez linkowanie rozumiem, że obiekt zwracany przez
mapStateToProps
zostanie dostarczony w czasie budowy jako rekwizyty, a wszelkie późniejsze zmiany będą dostępne za pośrednictwemcomponentWillReceiveProps
.Jeśli znasz wzór projektowy Observer, jest to dokładnie ta lub jego niewielka odmiana.
Przykład pomoże to wyjaśnić:
Może być inny tak zwany komponent reagujący,
itemsFilters
który obsługuje wyświetlanie i utrwalanie stanu filtra do stanu Sklepu Redux, składnik Demo „nasłuchuje” lub „subskrybuje” filtry stanu Sklepu Redux, więc za każdym razem, gdyfiltersComponent
reagują na zmiany stanu magazynu filtrów (z pomocą ) -redux wykrywa zmianę i powiadamia lub „publikuje” wszystkie komponenty nasłuchujące / subskrybowane, wysyłając zmiany do nich,componentWillReceiveProps
które w tym przykładzie uruchomią refilter elementów i odświeżą ekran z powodu zmiany stanu reakcji .Daj mi znać, jeśli przykład jest mylący lub niewystarczająco jasny, aby zapewnić lepsze wyjaśnienie.
Co do: Oznacza to, że stan wykorzystany przez komponent docelowy może mieć zupełnie inną strukturę niż stan przechowywany w sklepie.
Nie dostałem pytania, ale po prostu wiem, że stan reagowania (
this.setState
) jest zupełnie inny niż stan sklepu Redux!Stan reakcji służy do obsługi przerysowania i zachowania komponentu reakcji. Stan reakcji jest zawarty wyłącznie w komponencie.
Stan sklepu Redux jest kombinacją stanów reduktorów Redux, z których każdy odpowiada za zarządzanie logiką aplikacji w małej części. Do tych atrybutów reduktorów można uzyskać dostęp za pomocą
react-redux::connect@mapStateToProps
dowolnego komponentu! Które sprawiają, że stan sklepu Redux jest szeroko dostępny, podczas gdy stan składnika jest wyłączny.źródło
Ten przykład „ zareaguj i przeprowadź” oparty jest na przykładzie Mohameda Mellouki. Ale Sprawdza użyciu upiększać i strzępienia zasady . Zauważ, że definiujemy nasze rekwizyty i metody wysyłania za pomocą PropTypes , aby nasz kompilator nie krzyczał na nas. Ten przykład zawiera również niektóre wiersze kodu, których brakowało w przykładzie Mohameda. Aby użyć Connect, musisz zaimportować go z React-Redux . Ten przykład wiąże również metodę filterItems, co pozwoli uniknąć problemów z zakresem w komponencie . Ten kod źródłowy został automatycznie sformatowany przy użyciu JavaScript Prettify .
Ten przykładowy kod jest dobrym szablonem dla miejsca początkowego dla twojego komponentu.
źródło
React-Redux
connect
służy do aktualizacji sklepu dla każdej akcji.Jest to bardzo prosto i jasno wyjaśnione na tym blogu .
Możesz sklonować projekt github lub skopiować i wkleić kod z tego bloga, aby zrozumieć połączenie Redux.
źródło
Oto zarys / schemat do opisania zachowania
mapStateToProps
:(Jest to znacznie uproszczona implementacja tego, co robi kontener Redux.)
i dalej
źródło
}
}
źródło