reactjs - react - ¿Qué es mapDispatchToProps?

react redux mapstate to props

Question

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 método dispatch() 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é necesita mapDispatchToProps cuando ya tiene 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?

Answer 1

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 el nombre de la función dice mapDispatchToProps() , mapDispatchToProps() acción de dispatch a los accesorios (los accesorios de nuestro componente)

Por lo tanto, prop onTodoClick es una clave para la función mapDispatchToProps que delega más addTodo para despachar la acción 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())
      }
    }
}

Answer 2

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

Answer 3

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

En realidad, esto solo se puede responder en el contexto del patrón de container-component , que encontré mejor entendido por primera lectura:

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

entonces

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

En pocas palabras, se supone que sus components solo se preocupan 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 están los containers .

Por lo tanto, un component "bien diseñado" en el patrón tiene este aspecto:

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

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

Vea cómo este componente obtiene la información que muestra de los accesorios (que provino de la tienda redux a través de mapStateToProps ) y también obtiene su función de acción de sus accesorios: sendTheAlert() .

Ahí es donde entra mapDispatchToProps : en el container correspondiente

// 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 pueden verlo, ahora que es el container [1] el que sabe acerca de redux y despacho, almacenamiento, estado y ... cosas.

El component en el patrón, FancyAlerter , que realiza el renderizado no necesita saber nada de eso: obtiene su método para llamar al onClick del botón, a través de sus accesorios.

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

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 usar mapStateToProps con el mismo propósito que mapDispatchToProps por la razón básica de que no tiene acceso para dispatch dentro de mapStateToProp . Por lo tanto, no puede usar mapStateToProps para darle al componente envuelto un método que use dispatch .

No sé por qué decidieron 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 nombré 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

Answer 4

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

Answer 5

mapStateToProps , mapDispatchToProps y connect desde la biblioteca react-redux proporciona una forma conveniente de acceder a su state y la función de dispatch 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 se cambie su state se mapStateToProps a mapStateToProps con su nuevo state y, posteriormente, a medida que el componente de actualización de los props ejecute la función de representación para representar su componente en el navegador. mapDispatchToProps también almacena valores-clave en los props de su componente, generalmente toman la forma de una función. De esta manera, puede activar el cambio de state desde su componente onClick , onChange events.

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

Answer 6

mapStateToProps recibe el state y los props y le permite extraer los accesorios del estado para pasarlos al componente.

mapDispatchToProps recibe dispatch y props y está destinado a que usted enlace a los creadores de acciones para que despachen, de modo que cuando ejecuta la función resultante, la acción se despacha.

Creo que esto solo le ahorra tener que hacer 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