Czym jest mapDispatchToProps?

Wydaje mi się, że żadna z odpowiedzi nie wykrystalizowała, dlaczego mapDispatchToProps jest przydatna.

Na to naprawdę można odpowiedzieć tylko w kontekście wzoru container-component, który najlepiej zrozumiałam po pierwszym czytaniu: {26]}

Https://medium.com/@learnreact/container-components-c0e67432e005#.1a9j3w1jl

Then

Http://redux.js.org/docs/basics/UsageWithReact.html

W skrócie, Twoje components powinny dotyczyć tylko wyświetlania rzeczy. Jedynym miejscem, z którego mają uzyskać informacje, są ich rekwizyty .

Oddzielone od " displaying stuff "(komponentów) to:

• Jak dostać rzeczy do wyświetlania,
• i jak radzisz sobie z wydarzeniami.

Po to są containers.

Dlatego "dobrze zaprojektowany" component we wzorze wygląda tak:

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, jak komponent pobiera wyświetlane informacje z rekwizytów (które pochodzą ze sklepu redux poprzez mapStateToProps), a także otrzymuje swoją funkcję działania ze swoich rekwizytów: sendTheAlert().

Tutaj mapDispatchToProps pojawia się: w odpowiednim container

// 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, że jest to container [1] to wie o reduxie, wysyłce, sklepie, stanie i ... rzeczy.

component we wzorze FancyAlerter, który robi rendering, nie musi wiedzieć o żadnej z tych rzeczy: dostaje swoją metodę wywołania na onClick przycisku, za pomocą swoich właściwości.

I ... mapDispatchToProps był użytecznym środkiem, który redux zapewnia, aby kontener mógł łatwo przekazać tę funkcję do zawiniętego komponentu na swoich rekwizytach.

Wszystko to wygląda bardzo podobnie do przykładu todo W dokumentach, a inna odpowiedź tutaj, ale próbowałem rzucić go w świetle wzoru, aby podkreślić dlaczego .

(uwaga: nie możesz używać mapStateToProps w tym samym celu co mapDispatchToProps z podstawowego powodu, dla którego nie masz dostępu do dispatch wewnątrz mapStateToProp. Więc nie mogłeś użyć mapStateToProps, aby dać komponent zawinięty metoda wykorzystująca dispatch.

Nie wiem, dlaczego zdecydowali się podzielić ją na dwie funkcje mapowania - lepiej byłoby mieć mapToProps(state, dispatch, props) czyli jedną funkcję do wykonania obu!

[1] zauważ, że celowo wyraźnie nazwałem kontener FancyButtonContainer, aby podkreślić ,że jest to "rzecz" - tożsamość (a więc istnienie! jest to jedna z najbardziej rozpoznawalnych postaci na świecie.]}

export default connect(...)