javascript - 还原 todomvc : cannot understand `mapStateToProps`

Question

调查redux todomvc ，仍然对 connect 和 mapStateToProps 感到困惑.

tod​​omvc/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 在这里做什么。 .

欢迎任何意见。谢谢

Answer 1

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

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

例如，如果您发布的第二个示例如下所示。

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”功能“组合”了所有reducers，并且基本上在“state/store”(主要应用程序商店)下创建 key 。请记住，redux 为您的全局状态创建了一个事实来源的想法。因此，通过组合Reducers，我们将这些新的状态对象作为键放置在您的“全局状态”中......也就是说，如果您有多个reducer。通常情况下，您只会拥有一个。很多时候，您可能不需要“所有状态”，也许只是一部分。

那么，你的组件，可以说我们做到了这一点。

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

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

this.props.todos
this.props.products

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