redux todomvc:无法理解“`mapStateToProps`”

Question

看看余度，还被connect和mapStateToProps弄糊涂了。

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

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

state是Redux商店的状态。但我感到困惑的是，state有一个todos属性，它是一个数组。todos是减速器，是函数这里和这里。在阅读了mapStateToProps之后，仍然无法理解https://github.com/reactjs/react-redux/blob/master/docs/api.md在这里做什么。

欢迎任何评论。谢谢

Answer 1

使用redux，您的应用程序状态在一个对象中一起存在，称为state。当您创建一个新的还原器时，您需要将它包含在combineReducers助手中。您可以在这个文件中看到这种情况。您为每个减速机使用的键的名称实际上在状态中是相同的名称。在这种情况下就是待办事项。如果您为用户创建了一个新的还原器，并将其包含在combineReducers助手中作为users，那么它将作为state.users提供。

Answer 2

我试试看。我希望我足够简洁。

正如您正确地看到的，"state“被传递到"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，我们将这些新的状态对象放置在您的“全局状态”中，作为键.那就是如果你有一个以上的减速器。通常情况下，你只会有一个。很多时候，你可能不想要“你的全部状态”，也许只是一小部分。

那么，你的组件，让我们说，我们做到了。

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

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

this.props.todos
this.props.products

mapStateToProps所做的就是通过将这些值映射到组件来方便地访问组件上的“全局”存储/状态。基本上，它吞食你的组件，添加道具，然后吐出来修改后..用你的新价值观。