¿Qué es mapDispatchToProps?

Estaba leyendo la documentación de la biblioteca Redux y tiene este ejemplo:

Además de leer el estado, los componentes del contenedor pueden enviar acciones. De manera similar, puede definir una función llamada mapDispatchToProps()que recibe el dispatch()método y devuelve los accesorios de devolución de llamada que desea inyectar en el componente de presentación.

Esto en realidad no tiene sentido. ¿Por qué lo necesitas mapDispatchToPropscuando ya lo tienes mapStateToProps?

También proporcionan esta práctica muestra de código:

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

¿Alguien puede explicar en términos simples qué es esta función y por qué es útil?

Siento que ninguna de las respuestas ha cristalizado por qué mapDispatchToPropses útil.

Esto realmente solo se puede responder en el contexto del container-componentpatrón, que encontré mejor entendido por primera lectura: Componentes del contenedor y luego Uso con reacción .

En pocas palabras, componentsse supone que debes preocuparte solo por mostrar cosas. El único lugar del que se supone que deben obtener información es sus accesorios .

Separado de "mostrar cosas" (componentes) es:

• cómo obtienes las cosas para mostrar,
• y cómo manejas los eventos.

Para eso containersestán.

Por lo tanto, un "bien diseñado" componenten el patrón se ve así:

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

    render() {
        <div>
          <h1>Today's Fancy Alert is {this.props.fancyInfo}</h1>
          <Button onClick={sendAlert}/>
        </div>
     }
}

Ver cómo este componente se pone la información se muestra de puntales (que entró en la tienda a través de redux mapStateToProps) y también consigue su función de acción de sus puntales: sendTheAlert().

Ahí es donde mapDispatchToPropsentra: en el correspondientecontainer

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

Me pregunto si puedes ver, ahora que es el container 1 que sabe acerca de redux y despacho y tienda y estado y ... cosas.

El componenten el patrón, FancyAlerterque hace el renderizado, no necesita saber nada de eso: obtiene su método para llamar al onClickbotón, a través de sus accesorios.

Y ... mapDispatchToPropsfue el medio útil que proporciona redux para permitir que el contenedor pase fácilmente esa función al componente envuelto en sus puntales.

Todo esto se parece mucho al ejemplo de todo en los documentos, y otra respuesta aquí, pero he tratado de lanzarlo a la luz del patrón para enfatizar por qué .

(Nota: no puede usarlo mapStateToPropspara el mismo propósito que mapDispatchToPropspor la razón básica por la que no tiene acceso al dispatchinterior mapStateToProp. Por lo tanto, no puede usar mapStateToPropspara darle al componente empaquetado un método que use dispatch.

No sé por qué eligieron dividirlo en dos funciones de mapeo: ¡podría haber sido más ordenado tener mapToProps(state, dispatch, props) IE una función para hacer ambas cosas!

1 Tenga en cuenta que deliberadamente denominé explícitamente el contenedor FancyButtonContainer, para resaltar que es una "cosa": la identidad (y, por lo tanto, la existencia) del contenedor como "una cosa" a veces se pierde en la taquigrafía

export default connect(...) ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

sintaxis que se muestra en la mayoría de los ejemplos

Básicamente es una taquigrafía. Entonces, en lugar de tener que escribir:

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

Usaría mapDispatchToProps como se muestra en su código de ejemplo, y luego escribiría en otro lugar:

this.props.onTodoClick(id);

o más probablemente en este caso, lo tendrías como el controlador de eventos:

<MyComponent onClick={this.props.onTodoClick} />

Hay un video útil de Dan Abramov sobre esto aquí: https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist

mapStateToProps()es una utilidad que ayuda a su componente a obtener un estado actualizado (que es actualizado por algunos otros componentes),
mapDispatchToProps()es una utilidad que ayudará a su componente a activar un evento de acción (acción de envío que puede causar un cambio en el estado de la aplicación)

mapStateToProps, mapDispatchToPropsY connectde la react-reduxbiblioteca proporciona una manera conveniente de acceder a su statee dispatchfunción de su tienda. Básicamente, connect es un componente de orden superior, también puede pensar como un contenedor si esto tiene sentido para usted. Por lo tanto, cada vez que statese modifique mapStateToProps, se llamará con su nuevo componente statey, a medida que propsactualice el componente, se ejecutará la función de representación para representar su componente en el navegador. mapDispatchToPropstambién almacena valores-clave en propssu componente, generalmente toman la forma de una función. De esta manera, puede desencadenar statecambios desde su componente onClick, onChangeeventos.

De documentos:

const TodoListComponent = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

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) 

También asegúrese de estar familiarizado con React funciones sin estado y componentes de orden superior

mapStateToPropsrecibe el statey propsy le permite extraer accesorios del estado para pasar al componente.

mapDispatchToPropsrecibe dispatchy propsestá destinado a que usted obligue a los creadores de acciones a despachar, de modo que cuando ejecuta la función resultante, la acción se despacha.

Creo que esto solo le evita tener que hacerlo dispatch(actionCreator())dentro de su componente, lo que lo hace un poco más fácil de leer.

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

Ahora suponga que hay una acción para redux como:

export function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

Cuando lo importas,

import {addTodo} from './actions';

class Greeting extends React.Component {

    handleOnClick = () => {
        this.props.onTodoClick(); // This prop acts as key to callback prop for mapDispatchToProps
    }

    render() {
        return <button onClick={this.handleOnClick}>Hello Redux</button>;
    }
}

const mapDispatchToProps = dispatch => {
    return {
      onTodoClick: () => { // handles onTodoClick prop's call here
        dispatch(addTodo())
      }
    }
}

export default connect(
    null,
    mapDispatchToProps
)(Greeting);

Como dice el nombre de la función mapDispatchToProps(), mapadispatch acción a accesorios (los accesorios de nuestros componentes)

Por lo tanto, prop onTodoClickes una clave para la mapDispatchToPropsfunción que delega más allá para despachar acciones addTodo.

Además, si desea recortar el código y omitir la implementación manual, puede hacerlo,

import {addTodo} from './actions';
class Greeting extends React.Component {

    handleOnClick = () => {
        this.props.addTodo();
    }

    render() {
        return <button onClick={this.handleOnClick}>Hello Redux</button>;
    }
}

export default connect(
    null,
    {addTodo}
)(Greeting);

Que significa exactamente

const mapDispatchToProps = dispatch => {
    return {
      addTodo: () => { 
        dispatch(addTodo())
      }
    }
}