O que é mapDispatchToProps?

Eu estava lendo a documentação da biblioteca Redux e tem esse exemplo,

Além de ler o estado, os componentes do contêiner podem despachar ações. De maneira semelhante, você pode definir uma function chamada mapDispatchToProps() que recebe o método dispatch () e retorna adereços de retorno de chamada que você deseja injetar no componente de apresentação.

Isso realmente não faz sentido. Por que você precisa de mapDispatchToProps quando já tem mapStateToProps ?

Eles também fornecem este exemplo de código acessível:

 const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } 

Alguém pode explicar, em termos leigos, qual é essa function e por que é útil?

Eu sinto que nenhuma das respostas cristalizou porque o mapDispatchToProps é útil.

Isso só pode realmente ser respondido no contexto do padrão de container-component , que achei melhor compreendido pela primeira leitura:

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

então

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

Em suma, seus components devem estar preocupados apenas com a exibição de itens. O único lugar onde eles devem obter informações são seus adereços .

Separado de “exibir material” (componentes) é:

  • como você consegue as coisas para exibir,
  • e como você lida com events.

É para isso que servem os containers .

Portanto, um component “bem projetado” no padrão se parece com isso:

 class FancyAlerter extends Component { sendAlert = () => { this.props.sendTheAlert() } render() { 

Today's Fancy Alert is {this.props.fancyInfo}

} }

Veja como este componente obtém a informação que ele exibe de props (que veio do repository redux via mapStateToProps ) e também obtém sua function de ação de seus props: sendTheAlert() .

É aí que vem o mapDispatchToProps : no container correspondente

 // 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 ) 

Gostaria de saber se você pode ver, agora que é o container [1] que sabe sobre redux e dispatch e store and state e … stuff.

O component no padrão, FancyAlerter , que faz a renderização não precisa saber sobre nenhuma dessas coisas: ele recebe seu método para chamar onClick do botão, via seus objects.

E … mapDispatchToProps foi o meio útil que o redux fornece para deixar o contêiner passar facilmente essa function para o componente empacotado em seus objects.

Tudo isso parece muito com o exemplo todo em documentos, e outra resposta aqui, mas tentei lançá-lo à luz do padrão para enfatizar o motivo .

(Nota: você não pode usar mapStateToProps com a mesma finalidade que mapDispatchToProps pelo motivo básico que você não tem access para dispatch dentro de mapStateToProp . Então você não pode usar mapStateToProps para dar ao componente empacotado um método que usa dispatch .

Eu não sei por que eles escolheram dividi-lo em duas funções de mapeamento – poderia ter sido mais mapToProps(state, dispatch, props) ter mapToProps(state, dispatch, props) uma function para fazer as duas coisas!


[1] Note que eu deliberadamente nomeei explicitamente o container FancyButtonContainer , para destacar que é uma “coisa” – a identidade (e, portanto, a existência!) Do contêiner como “uma coisa” às vezes é perdida na taquigrafia

export default connect(...)

syntax que é mostrada na maioria dos exemplos

É basicamente uma taquigrafia. Então, ao invés de ter que escrever:

 this.props.dispatch(toggleTodo(id)); 

Você usaria mapDispatchToProps como mostrado em seu código de exemplo e, em seguida, em outro lugar, escrever:

 this.props.onTodoClick(id); 

ou mais provavelmente neste caso, você teria isso como o manipulador de events:

  

Há um vídeo útil por Dan Abramov sobre isso aqui: https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist

mapStateToProps() é um utilitário que ajuda seu componente a se atualizar (atualizado por alguns outros componentes),
mapDispatchToProps() é um utilitário que ajudará seu componente a triggersr um evento de ação (ação de despacho que pode causar alteração do estado do aplicativo)

mapStateToProps , mapDispatchToProps e connect da biblioteca mapDispatchToProps react-redux fornece uma maneira conveniente de acessar seu state e function de dispatch de sua loja. Então, basicamente, conectar-se é um componente de ordem superior, você também pode coisa como um invólucro, se isso faz sentido para você. Então, toda vez que seu state for alterado, mapStateToProps será chamado com seu novo state e, subseqüentemente, conforme você props componente de atualização executará a function render para renderizar seu componente no navegador. mapDispatchToProps também armazena valores-chave nos props do seu componente, geralmente eles assumem uma forma de function. Desta forma, você pode acionar a mudança de state de seus events onClick , onChange .

De docs:

 const TodoListComponent = ({ todos, onTodoClick }) => ( 
    {todos.map(todo => onTodoClick(todo.id)} /> )}
) const mapStateToProps = (state) => { return { todos: getVisibleTodos(state.todos, state.visibilityFilter) } } const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } function toggleTodo(index) { return { type: TOGGLE_TODO, index } } const TodoList = connect( mapStateToProps, mapDispatchToProps )(TodoList)

Certifique-se também de que você esteja familiarizado com as funções sem status React e com os Componentes de Pedidos Mais Elevados.

mapStateToProps recebe o state e mapStateToProps e permite que você extraia props do estado para passar para o componente.

mapDispatchToProps recebe dispatch e props e destina-se a vincular criadores de ação a serem despachados; assim, quando você executa a function resultante, a ação é despachada.

Eu acho que isso só evita que você tenha que dispatch(actionCreator()) dentro do seu componente, tornando-o um pouco mais fácil de ler.

https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments