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

Question

我读了Presentational and Container Components and Smart and Dumb Components in React

和概念：

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

但是他们没有提到 mapDispatchToProps 和 mapDispatchToProps

这是否意味着我应该从容器中获取 state 和 action 而不要在组件中使用 mapDispatchToProps 和 mapDispatchToProps？？？
或者意味着我可以使用 mapDispatchToProps 但不要在组件中使用 mapDispatchToProps？？？

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

Answer 1

展示组件定义了事物的外观以及不应与商店关联的方式。这是 Presentational/Dumb 组件的示例：

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

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

export default TodoList

容器定义了事物的工作方式，您不应在此类组件中放置 DOM 标记或样式。它连接到商店，只向 Presentational/Dumb 个组件提供数据。这是 Container/Smart 组件的示例：

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

因此，为了回答您的问题，您不应在 Presentational/Dumb 个组件中使用 mapStateToProps 和 mapDispatchToProps。

Answer 2

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

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

Redux relation between component, container and mapDispatchToProps,mapDispatchToProps

reactjs

react-redux