¿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 reciba eldispatch()método y devuelva los accesorios de devolución de llamada que desea inyectar en el componente de presentación.
En realidad, esto no tiene sentido. ¿Por qué lo necesitas mapDispatchToPropscuando ya lo tienes mapStateToProps?
También proporcionan este práctico ejemplo de código:
const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(toggleTodo(id))
}
}
}
¿Qué es esta función y por qué es útil?
Siento que ninguna de las respuestas ha cristalizado por qué mapDispatchToPropses útil.
En realidad, esto solo se puede responder en el contexto del container-componentpatrón, que encontré que se entiende mejor leyendo primero: Componentes del contenedor y luego Uso con React .
En pocas palabras, componentsse supone que sólo debes preocuparte por mostrar cosas. El único lugar del que se supone que deben obtener información son sus accesorios .
Separado de "mostrar material" (componentes) está:
- cómo consigues que las cosas se muestren,
- y cómo manejas los eventos.
Para eso containersestamos.
componentPor lo tanto, un patrón "bien diseñado" se verá 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>
}
}
Vea cómo este componente obtiene la información que muestra de los accesorios (que provienen 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 mapDispatchToPropsentra en juego: 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 el que sabe sobre redux, despacho, almacenamiento, estado y... esas cosas.
El componentpatrón, FancyAlerterque realiza la representación, 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 accesorios.
Todo esto se parece mucho al ejemplo de tareas pendientes en los documentos, y hay otra respuesta aquí, pero he intentado presentarlo a la luz del patrón para enfatizar el porqué .
(Nota: no puede usarlo mapStateToPropspara el mismo propósito que mapDispatchToPropspor la razón básica de que no tiene acceso al dispatchinterior mapStateToProp. Por lo tanto, no podría usarlo 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) una función de IE para hacer ambas!
1 Tenga en cuenta que nombré deliberadamente y explícitamente el contenedor FancyButtonContainer, para resaltar que es una "cosa": la identidad (¡y por 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
Es básicamente 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 controlador de eventos:
<MyComponent onClick={this.props.onTodoClick} />
Hay un video útil de Dan Abramov sobre esto aquí: Redux: Generando contenedores con connect() de 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 (despachando una acción que puede causar un cambio en el estado de la aplicación)
mapStateToProps, mapDispatchToPropsy connectdesde react-reduxla biblioteca proporciona una forma conveniente de acceder statea las dispatchfunciones de su tienda. Básicamente, conectar es un componente de orden superior; también puedes pensar como un contenedor si esto tiene sentido para ti. Por lo tanto, cada vez que statecambie, mapStateToPropsse llamará con su nuevo componente statey, posteriormente, a medida que propsactualice, se ejecutará la función de procesamiento para representar su componente en el navegador. mapDispatchToPropstambién almacena valores-clave en el propscomponente, generalmente toman la forma de una función. De tal manera, puede desencadenar statecambios desde sus componentes 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 las funciones sin estado de React y los componentes de orden superior.
