Los documentos de Redux para bindActionCreators afirman que:
El único caso de uso para
bindActionCreatorses cuando desea pasar algunos creadores de acciones a un componente que no es consciente de Redux, y no desea pasarle el envío o la tienda de Redux.
¿Cuál sería un ejemplo en el que se usarían/necesitarían bindActionCreators ?
¿Qué tipo de componente no sería consciente de Redux ?
¿Cuáles son las ventajas/desventajas de ambas opciones?
//actionCreator import * as actionCreators from './actionCreators' function mapStateToProps(state) { return { posts: state.posts, comments: state.comments } } function mapDispatchToProps(dispatch) { return bindActionCreators(actionCreators, dispatch) } function mapStateToProps(state) { return { posts: state.posts, comments: state.comments } } function mapDispatchToProps(dispatch) { return { someCallback: (postId, index) => { dispatch({ type: 'REMOVE_COMMENT', postId, index }) } } }No creo que la respuesta más popular en realidad aborde la pregunta.
Todos los ejemplos a continuación esencialmente hacen lo mismo y siguen el concepto de no "vinculación previa".
// option 1 const mapDispatchToProps = (dispatch) => ({ action: () => dispatch(action()) }) // option 2 const mapDispatchToProps = (dispatch) => ({ action: bindActionCreators(action, dispatch) }) // option 3 const mapDispatchToProps = { action: action } La opción n #3 es solo una abreviatura de la opción n #1 , por lo que la verdadera pregunta es por qué uno usaría la opción n #1 frente a la opción n #2 . He visto que ambos se usan en el código base de react-redux, y creo que es bastante confuso.
Creo que la confusión proviene del hecho de que todos los ejemplos en el documento de react-redux usan bindActionCreators mientras que el documento para bindActionCreators (como se cita en la pregunta misma) dice que no lo use con react-redux.
Supongo que la respuesta es la consistencia en el código base, pero personalmente prefiero envolver explícitamente las acciones en el envío cuando sea necesario.
El 99% de las veces, se usa con la función React-Redux connect() , como parte del parámetro mapDispatchToProps . Se puede usar explícitamente dentro de la función mapDispatch que proporciona, o automáticamente si usa la sintaxis abreviada de objetos y pasa un objeto lleno de creadores de acciones para 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 necesita ejecutar 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 que exista props.dispatch .
Escribí algunos pensamientos sobre este tema en mi publicación de 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);