还原todomvc：无法理解`mapStateToProps`

纵观redux todomvc，仍然被connect和mapStateToProps混淆。还原todomvc：无法理解`mapStateToProps`

在todomvc/SRC /集装箱代码的一部分和/ App.js是：

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

state是Redux的”存储状态。但我很困惑，state有一个todos属性，这是一个数组。 todos是减速机，功能是here和here。在阅读https://github.com/reactjs/react-redux/blob/master/docs/api.md后，仍然无法理解mapStateToProps在这里的作用。

欢迎任何评论。谢谢

来源

2016-11-15 BAE

与您的应用程序状态一起存在于一个对象，称为状态。当您创建一个新的减速器时，您需要将其包含在帮助器combineReducers中。你可以看到发生在这个file。每个减速器使用的密钥名称实际上最终都是相同的名称。在这种情况下，它是todos。如果您为用户创建了一个新的减速器，并将其作为users包含在combineReducers帮助器中，它将作为state.users提供。

来源

2016-11-15 02:00:21

state.todos（Array）是reducer函数的输出。 'todos'是以'combineReducers'里面的键名命名的？我对吗？谢谢 – BAE

是的，你明白了 –

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

正如你所看到的，“状态”被传递给“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为您的全球状态创造了一个真理来源的想法。所以，通过combingReducers，我们把这些新的状态对象放在你的“全局状态”中，作为键......也就是说如果你有多个reducer。多数情况下，你只有一个。很多时候，你可能不想要“你所有的状态”，也许只是一个片段。

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

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

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

this.props.todos 
this.props.products

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

来源

2016-11-15 02:01:40

mapStateToProps函数应该去哪里？我可以在他们提供服务提供商的最高级别上完成这项工作，然后完成这项工作吗？还是您一直在继续编写这些该死的工作？ –

嘿迈克尔 - 我通常把mapStateToProps放在容器组件/页面中 - 然后传递给他们需要的儿童组件。 “我习惯把它放在任何地方”，通过抽象出行为并且只有一个处理它的中间件。但是，每个组件上都有一个性能障碍，每次状态发生变化时，都会涉及到所有可能不关心特定状态变化的组件。所以，我现在所做的就是在我的“顶级/家长”组件中使用它，然后向我的孩子洒下他们需要的东西。这是否回答你的问题？ –

是的，詹姆斯，谢谢:) –

还原todomvc：无法理解`mapStateToProps`

回答

相关问题