redux todomvc：无法理解`mapStateToProps`答案

【问题标题】：redux todomvc: cannot understand `mapStateToProps`redux todomvc：无法理解`mapStateToProps`
【发布时间】：2017-03-28 18:57:38
【问题描述】：

查看redux todomvc，仍然对connect 和mapStateToProps 感到困惑。

todomvc/src/containers/App.js 中的部分代码是：

const mapStateToProps = state => ({
  todos: state.todos
})

state 是 Redux 存储中的状态。但我很困惑state 有一个todos 属性，它是一个数组。 todos 是 reducer，是函数 here 和 here。读了https://github.com/reactjs/react-redux/blob/master/docs/api.md之后还是不明白mapStateToProps在这里做了什么。

欢迎任何 cmets。谢谢

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

我会试一试的。我希望我足够简洁。

如您所见，“状态”被传递给“mapStateToProps”。这是一个包含减速器的对象 - 每个减速器的“存储”或“状态”。

例如，如果您发布的第二个示例看起来像这样。

import { combineReducers } from 'redux'
import todos from './todos'
import products from './products'

const rootReducer = combineReducers({
  todos,
  products
})

export default rootReducer

您现在拥有“产品”状态。所以传递给 mapStateToProps 的“状态”对象看起来像这样

state = {
  todos,
  products
}

因为“combineReducers”功能“组合”了所有减速器，并且基本上在“状态/商店”（主要应用商店）下创建键。请记住，redux 为您的全局状态创建了一个事实来源的想法。因此，通过组合Reducer，我们将这些新状态对象作为键放置在您的“全局状态”中……也就是说，如果您有多个reducer。很多时候，你只会有一个。很多时候，你可能不想要“你所有的状态”，也许只是一片。

所以，您的组件，假设我们这样做了。

const mapStateToProps = state => ({
  todos: state.todos,
  products: state.products
})

您的组件现在可以访问以下内容：

this.props.todos
this.props.products

mapStateToProps 所做的只是通过将这些值映射到您的组件上，方便您访问这个“全局”存储/状态到您的组件上。基本上，它会吞噬你的组件，添加道具，然后用你的新值把它吐出来。

【讨论】：

mapStateToProps 函数应该去哪里？我可以在我的最高级别设置提供程序，然后完成它，还是你总是继续写这个该死的东西？
嘿 Michael - 我通常将 mapStateToProps 放在容器组件/页面中 - 然后将他们需要的东西交给子组件。通过抽象出行为并仅拥有一个处理它的中间件，“我习惯把它放在任何地方”。但是，在每个组件上都有它是每次状态更改之间的性能障碍，它会级联到每个可能不关心特定状态更改的组件。所以，我现在要做的是在我的“顶级/父”组件中使用它，然后将他们需要的东西洒给我的孩子。这能回答你的问题吗？

【解决方案2】：

使用 redux，您的应用程序状态一起存在于一个对象中，称为状态。当你创建一个新的 reducer 时，你需要将它包含在 combineReducers 帮助器中。您可以在 file 中看到这种情况。您为每个 reducer 使用的键名实际上最终在状态中是相同的名称。在这种情况下，它是待办事项。如果您为用户创建了一个新的 reducer，并将其作为 users 包含在 combineReducers 帮助程序中，它将以 state.users 的形式提供。

【讨论】：

state.todos (Array) 是reducer函数的输出。而todos 是以combineReducers 中的键名命名的？我对吗？谢谢
是的，你明白了