reactjs - React-Redux:连接期间状态为空
问题描述
有类似的问题,但解决方案对我不起作用。我看不出我们在哪里指示 React-Redux 为状态赋予一些价值。在以下组件中,这部分失败(状态)=>({成分:state.ingredients})。原因:状态未定义
import React from 'react';
import { connect } from 'react-redux'
class Ingredients extends React.Component {
render() {
return (
<div>Ingredients</div>
);
}
}
export default connect(
(state) => ({ ingredients: state.ingredients }), //This fails!
(dispatch) => ({
createNew: () => dispatch(actions.createNew()),
edit: (id) => dispatch(actions.edit(id))
})
)(Ingredients);
这家商店只有:
function AppStore(state, action) {
return {
ingredients: { foo: "bar" }
};
}
}
export default AppStore;
成分不可能是空的
商店绑定到应用程序为:
var appStore = createStore(AppStore);
ReactDOM.render((
<BrowserRouter>
<Provider store={appStore}>
<Route component={App} />
</Provider>
</BrowserRouter>
), document.getElementById('root'));
App 组件只是一个视图,其中包含我在 redux 中真正需要的组件(成分):
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Switch>
<Route path='/home' component={Home} />
<Route path='/recipes' component={Recipes} />
<Route path='/ingredients' component={Ingredients} />
<Route render={() => <div>Not found!</div>} />
</Switch>
<Footer />
</div>
);
}
成分组件是我帖子开头的组件。我觉得这个 Redux 魔法是缺失的,或者它真的是违反直觉的。
成分组件如何知道“状态”的值?它在哪里注入到组件中?Redux 如何知道在哪些组件上注入状态?
我遵循了不同的教程,在所有这些教程中,我只能看到 createStore 被调用,然后将其分配给标签,然后使用“连接”来导出组件。我也对这种设置感到非常不舒服,这正常吗?首先,在接受 React 作为一种“面向组件”的工作方式以结束将所有逻辑放在一个存储中之后,我感到很糟糕。另外,我质疑为什么“连接”实现,当我们可以拥有组件继承时(扩展 Redux.ConnectedComponent 或类似的东西呢?)......然后,所有这些神奇的设置......也许我应该尝试其他东西而不是还原?
编辑:将连接部分更改为:
function mapStateToProps(state) {
return { ingredients: state.ingredients };
}
function mapDispatchToProps(dispatch) {
return {
createNew: () => dispatch(actions.createNew()),
edit: (id) => dispatch(actions.edit(id))
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Ingredients);
通过这种更改(我认为只是重新排序的语法),状态未定义
编辑 2: 我的错,我正在导入与此处显示的不同的商店如果我导入正确的商店,则状态不再未定义
解决方案
常见的做法是创建一个单独的函数来返回一个对象,为您希望在组件中mapStateToProps
作为 a 提供的每个 redux 状态定义一个键值对。prop
这将大大简化您的connect
逻辑。
import React from 'react';
import { connect } from 'react-redux'
class Ingredients extends React.Component {
render() {
return (
<div>{this.props.ingredients.foo}</div>
);
}
}
const mapStateToProps = (state) => {
return {
ingredients: state.ingredients
}
}
export default connect(mapStateToProps, { createNew, edit })(Ingredients)
connect 函数会将 store 的state
对象与作为第一个参数传递的函数挂钩。类似地,您可以对调度程序函数执行相同的操作,使用 ES6 将它们作为对象传递。然后该dispatch
方法被传递给第二个参数中的每个函数。
推荐阅读
- symfony - 属性路径“gouvernorat”中给出的“字符串”类型、“App\Entity\Gouvernorat”的预期参数
- java - xmlGregorianCalendar 转换为 GregorianCalendar 将日期减少一天
- javascript - 如何使用 JAX-RS 在 REST 中将 Javascript 日期传递给 Java LocalDate 和 LocalDateTime
- apache-spark - 如何使用 java lambda 表达式 foreach 添加到现有列表
- node.js - 插入数据库工作正常。在数据库连接上运行测试被拒绝
- ruby - 如何创建类实例并将其存储为类常量
- excel - 从充满相同 Word 表格的文件夹中提取特定单元格
- python - XPath:如何根据直接在它之前的同级元素的值来选择一个元素?
- android - 如何在内部存储中保存 .txt/.csv?德尔福
- xml - 在 Oracle 中将 XML 转换为行和列