组件、容器与mapDispatchToProps、mapDispatchToProps的关系

Question

我读过表示组件和容器组件和反应中的智能和麻木元件

以及这个概念：

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

但是他们没有提到mapDispatchToProps和mapDispatchToProps

这是否意味着我应该从容器中获取state和action，并且在组件中不使用mapDispatchToProps和mapDispatchToProps？

或者意味着我可以使用mapDispatchToProps，但不能在组件中使用mapDispatchToProps？

我对这个组件，容器概念感到困惑。

Answer 1

表示组件定义了事物的外观，而不应该连接到商店。下面是演示/麻木组件的一个示例：

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

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

export default TodoList

容器定义了事情是如何工作的，您不应该将DOM标记或样式放在这种组件中。它连接到存储区，只向表示/麻木组件提供数据。下面是一个容器/智能组件的示例：

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

因此，要回答您的问题，不应该在表示/麻木组件中使用mapStateToProps和mapDispatchToProps。

Answer 2

这是一篇不错的关于redux https://medium.freecodecamp.com/why-redux-makes-sense-to-me-and-how-i-conceptualize-it-c8a3a9db15ca#.5na6nr60l的文章。