user2492364 user2492364 - 3 months ago 16
React JSX Question

Redux relation between component, container and mapDispatchToProps,mapDispatchToProps

I read Presentational and Container Components and Smart and Dumb Components in React

And the concept :

components for “dumb” React components ;
containers for “smart” React components ;


But they did not mention the
mapDispatchToProps
and
mapDispatchToProps


Is it means I should get
state
and
action
from container and do not use
mapDispatchToProps
and
mapDispatchToProps
in components???

Or means I can use
mapDispatchToProps
but do not use
mapDispatchToProps
in components???

I felt confused about this component, container concept

Answer

A Presentational Component defines how things look and shouldn't be connected to the store. Here is an example of a Presentational/Dumb component:

import React from "react"
import styles from "./styles.css"

const TodoList = ({ todos, removeTodo }) => (
  <div className={ styles.todoList }>
    { ... }
  </div>
)

export default TodoList

A Container defines how things work and you shouldn't put DOM markup or styles in this kind of component. It's connected to the store and only provides data to Presentational/Dumb components. Here is an example of a Container/Smart component:

import { connect } from "react-redux"
import { removeTodo } from "actions/todos"
import TodoList from "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, to answer your question, you shouldn't use mapStateToProps and mapDispatchToProps in Presentational/Dumb components.