Question

调查redux todomvc，仍被connect和mapStateToProps混淆。

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

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

state是Redux＆＃39;中的州。商店。但我很困惑state有todos属性，这是一个数组。 todos是reducer，功能here和here。在阅读https://github.com/reactjs/react-redux/blob/master/docs/api.md之后，仍然无法理解mapStateToProps在这里的作用。

欢迎任何评论。感谢

Answer 1

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

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

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

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

const rootReducer = combineReducers({
  todos,
  products
})

export default rootReducer

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

state = {
  todos,
  products
}

因为“combineReducers”功能“组合”了所有减速器，并且基本上在“州/商店” - 主要应用程序商店下创建了密钥。请记住，redux为您的全球状态创造了一个真理来源的想法。因此，通过combingReducers，我们将这些新的状态对象放在您的“全局状态”中，作为键...即如果您有多个reducer。通常情况下，你只有一个。很多时候，你可能不想要“你所有的状态”，也许只是一片。

所以，你的组件，让我们说我们做到了。

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

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

this.props.todos
this.props.products

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

Answer 2

使用redux，您的app状态一起存在于一个对象中，称为state。创建新的reducer时，需要将其包含在combineReducers帮助器中。您可以在此file中看到这种情况。您为每个reducer使用的密钥名称实际上最终与该状态中的名称相同。在这种情况下它是todos。如果您为用户创建了一个新的reducer，并将其作为combineReducers添加到users帮助器中，那么它将以state.users的形式提供。

redux todomvc：无法理解`mapStateToProps`

2 个答案: