Solución:
No creo que la respuesta más popular, en realidad, aborde la pregunta.
Todos los ejemplos a continuación hacen esencialmente lo mismo y siguen el concepto de no “pre-vinculante”.
// option 1
const mapDispatchToProps = (dispatch) => ({
action: () => dispatch(action())
})
// option 2
const mapDispatchToProps = (dispatch) => ({
action: bindActionCreators(action, dispatch)
})
// option 3
const mapDispatchToProps = {
action: action
}
Opción #3 es solo una abreviatura de opción #1 , entonces la verdadera pregunta por qué uno usaría la opción #1 vs opción #2. He visto a ambos utilizados en la base de código react-redux, y me parece bastante confuso.
Creo que la confusión proviene del hecho de que todos los ejemplos en react-redux doc utiliza bindActionCreators mientras que el documento para bindActionCreators (como se cita en la pregunta en sí) dice que no lo use con react-redux.
Supongo que la respuesta es la coherencia en el código base, pero personalmente prefiero envolver acciones explícitamente en envío siempre que sea necesario.
El 99% del tiempo, se usa con React-Redux connect() función, como parte de la mapDispatchToProps parámetro. Se puede utilizar explícitamente dentro del mapDispatch función que proporcione, o automáticamente si usa la sintaxis abreviada del objeto y pasa un objeto lleno de creadores de acciones a connect.
La idea es que al vincular previamente a los creadores de acciones, el componente que pasa a connect() técnicamente “no sabe” que está conectado, solo sabe que debe ejecutarse this.props.someCallback(). Por otro lado, si no vinculó a los creadores de acciones y llamó this.props.dispatch(someActionCreator()), ahora el componente “sabe” que está conectado porque espera props.dispatch existir.
Escribí algunas reflexiones sobre este tema en la publicación de mi blog Idiomatic Redux: ¿Por qué usar creadores de acciones?
Ejemplo más completo, pase un objeto lleno de creadores de acciones para conectarse:
import * as ProductActions from './ProductActions';
// component part
export function Product({ name, description }) {
return <div>
<button onClick={this.props.addProduct}>Add a product</button>
</div>
}
// container part
function mapStateToProps(state) {
return {...state};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
...ProductActions,
}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Product);