reactjs - Redux relation between component, container and mapDispatchToProps,mapDispatchToProps -
i read presentational , container components , smart , dumb components in react
and concept :
components “dumb” react components ; containers “smart” react components ;
but did not mention mapdispatchtoprops
, mapdispatchtoprops
is means should state
, action
container , not use mapdispatchtoprops
, mapdispatchtoprops
in components???
or means can use mapdispatchtoprops
not use mapdispatchtoprops
in components???
i felt confused component, container concept
a presentational component defines how things , shouldn't connected store. here example of presentational/dumb component:
import react "react" import styles "./styles.css" const todolist = ({ todos, removetodo }) => ( <div classname={ styles.todolist }> { ... } </div> ) export default todolist
a container defines how things work , shouldn't put dom markup or styles in kind of component. it's connected store , provides data presentational/dumb components. here example of container/smart component:
import { connect } "react-redux" import { removetodo } "actions/todos" import todolist "components/todolist" const mapstatetoprops = (state) => ({ todos: state.todos, }) const mapdispatchtoprops = (dispatch) => ({ removetodo(todoid) { dispatch(removetodo(todoid)) }, }) const todolistcontainer = connect( mapstatetoprops, mapdispatchtoprops )(todolist) export default todolistcontainer
so, answer question, shouldn't use mapstatetoprops
, mapdispatchtoprops
in presentational/dumb components.
Comments
Post a Comment