Wydaje mi się, że żadna z odpowiedzi nie ukazuje, dlaczego mapDispatchToProps
jest przydatna.
Naprawdę można na to odpowiedzieć tylko w kontekście container-component
wzorca, który najlepiej zrozumiałem w pierwszym czytaniu: Składniki kontenera, a następnie użycie z React .
W skrócie, components
powinieneś zajmować się tylko wyświetlaniem rzeczy. Jedyne miejsce oni mają dostać informację z jest ich rekwizyty .
Od „wyświetlania rzeczy” (komponentów) oddzielone jest:
- w jaki sposób wyświetlasz rzeczy,
- i jak radzisz sobie ze zdarzeniami.
Po to containers
są.
Dlatego „dobrze zaprojektowany” component
wzór wygląda następująco:
class FancyAlerter extends Component {
sendAlert = () => {
this.props.sendTheAlert()
}
render() {
<div>
<h1>Today's Fancy Alert is {this.props.fancyInfo}</h1>
<Button onClick={sendAlert}/>
</div>
}
}
Zobacz, w jaki sposób ten komponent pobiera informacje, które wyświetla z rekwizytów (które pochodzą ze sklepu redux przez mapStateToProps
), a także pobiera swoją funkcję akcji ze swoich rekwizytów:sendTheAlert()
.
Tam właśnie mapDispatchToProps
przychodzi: w odpowiednimcontainer
// FancyButtonContainer.js
function mapDispatchToProps(dispatch) {
return({
sendTheAlert: () => {dispatch(ALERT_ACTION)}
})
}
function mapStateToProps(state) {
return({fancyInfo: "Fancy this:" + state.currentFunnyString})
}
export const FancyButtonContainer = connect(
mapStateToProps, mapDispatchToProps)(
FancyAlerter
)
Zastanawiam się, czy widzisz, teraz, gdy jest to container
1 który wie o redux i wysyłce oraz o przechowywaniu, stanie i ... rzeczach.
component
We wzorcu, FancyAlerter
, co robi renderowania nie musi wiedzieć o żadnej z tych rzeczy: to dostaje swoją metodę na wywołanieonClick
przycisku, za pośrednictwem swoich rekwizytów.
I ... mapDispatchToProps
był użytecznym środkiem, który zapewnia redux, aby umożliwić kontenerowi łatwe przekazanie tej funkcji do owiniętego komponentu na jego rekwizytach.
Wszystko to bardzo przypomina przykład todo w dokumentach i kolejną odpowiedź tutaj, ale próbowałem rzucić go w świetle wzoru, aby podkreślić, dlaczego .
(Uwaga: nie można używać mapStateToProps
do tego samego celu, co mapDispatchToProps
z podstawowego powodu, dla którego nie masz dostępu do dispatch
wnętrza mapStateToProp
. Nie można więc użyć mapStateToProps
zapakowanego komponentu do metody, która używa dispatch
.
Nie wiem, dlaczego zdecydowali się podzielić go na dwie funkcje mapowania - być może łatwiej byłoby mieć mapToProps(state, dispatch, props)
jedną funkcję IE do obu!
1 Zauważ, że celowo wyraźnie nadałem nazwę kontenerowi FancyButtonContainer
, aby podkreślić, że jest to „rzecz” - tożsamość (a zatem i istnienie!) Kontenera jako „rzecz” jest czasami gubiona w skrócie
export default connect(...)
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
składnia pokazana w większości przykładów
ALERT_ACTION
czy to funkcja akcji, czy ta,type
która jest zwracana z funkcji akcji? : / so baffedZasadniczo jest to skrót. Zamiast więc pisać:
Używałbyś mapDispatchToProps, jak pokazano w przykładowym kodzie, a następnie w innym miejscu napisz:
lub bardziej prawdopodobne, że w tym przypadku będziesz mieć to jako moduł obsługi zdarzeń:
Tutaj znajduje się pomocne wideo Dana Abramova: https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist
źródło
mapDispatch
funkcji, Redux użyje domyślnej. Ta domyślnamapDispatch
funkcja po prostu pobieradispatch
odwołanie do funkcji i daje ci ją jakothis.props.dispatch
.mapStateToProps()
to narzędzie, które pomaga Twojemu komponentowi zaktualizować stan (który jest aktualizowany przez niektóre inne komponenty),mapDispatchToProps()
to narzędzie, które pomoże Twojemu komponentowi uruchomić zdarzenie akcji (akcja wywołująca, która może spowodować zmianę stanu aplikacji)źródło
mapStateToProps
,mapDispatchToProps
aconnect
zreact-redux
biblioteki zapewnia wygodny sposób na dostęp do twojego sklepustate
i jegodispatch
funkcji. Więc w zasadzie connect jest składnikiem wyższego rzędu, możesz również pomyśleć jako opakowanie, jeśli ma to dla Ciebie sens. Tak więc przy każdejstate
zmianie twojamapStateToProps
będzie wywoływana z nowym,state
a następnie podczasprops
aktualizacji komponent uruchomi funkcję renderowania, aby renderować komponent w przeglądarce.mapDispatchToProps
przechowuje również kluczowe wartości wprops
twoim komponencie, zwykle przyjmują one postać funkcji. W ten sposób możesz wywołaćstate
zmianę ze swojego komponentuonClick
,onChange
zdarzeń.Z dokumentów:
Upewnij się także, że znasz React bezpaństwowe funkcje i komponenty wyższego rzędu
źródło
mapStateToProps
otrzymujestate
iprops
i pozwala wyodrębnić rekwizyty ze stanu przejść do komponentu.mapDispatchToProps
otrzymujedispatch
iprops
służy do wiązania twórców akcji do wysłania, więc po wykonaniu wynikowej funkcji akcja zostaje wysłana.Uważam, że to tylko ratuje cię przed koniecznością zrobienia tego
dispatch(actionCreator())
w komponencie, dzięki czemu jest nieco łatwiejszy do odczytania.https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments
źródło
dispatch
metody? Skąd to pochodzi?<Provider/>
. Wykonuje własną magię komponentów wysokiego rzędu, aby zagwarantować, że wysyłka jest dostępna w jej komponentach potomnych.Załóżmy teraz, że istnieje akcja redux, ponieważ:
Kiedy go zaimportujesz,
Jak sama nazwa funkcji mówi
mapDispatchToProps()
, mapdispatch
akcję na rekwizyty (rekwizyty naszego komponentu)Więc prop
onTodoClick
jest kluczem domapDispatchToProps
funkcji, która przekazuje dalej do wysłania akcjiaddTodo
.Również jeśli chcesz przyciąć kod i ominąć ręczną implementację, możesz to zrobić,
Co dokładnie znaczy
źródło