Reactjs react-redux未将存储连接到react组件

我正在使用

react v0.14.3

，

redux v3.0.5

，

react redux v4.02

和

不可变v3.7.6

。 我试图使用

react-redux

将redux存储与react组件连接起来，但我似乎无法将存储数据传递给组件。我的控制台没有错误，在我的redux开发工具中，我看到了整个状态树。在我的

index.js

组件中，我正确设置了

提供程序

组件。我希望这是一个我可能忽略的简单错误

商店和供应商

从'redux'导入{createStore，applyMiddleware，compose}；
从“redux thunk”导入thunk中间件；
从“/../reducers/rootReducer.js”导入rootReducer；
从“/../components/DevTools/DevTools.jsx”导入DevToolsx；
//var createStoreWithMiddleware=applyMiddleware（thunkMiddleware）（createStore）；
var finalCreateStore=compose(
applyMiddleware（thunkMiddleware），
//window.devToolsExtension？window.devToolsExtension（）：f=>f
DevToolsx.instrument（）
)（createStore）；
导出默认函数configureStore（初始状态）{
var store=finalCreateStore（rootReducer，initialState）；
退货店；
}

//index.js
var store=configureStore（）；
渲染(
(
...
)，document.getElementById（'app'）；

减速器

//导入在我的代码库中
var样本=I.List.of(
一、地图({
sneakerImg:“someLinkToSneakerImg1”，
sneakerName:'Air Jordane 1'，
价格：120，
条件：10，
尺码：12，
重播：是的，
数量：1
})
);
导出函数dashShoppingCartReducer（状态=示例，操作）{
开关（动作类型）{
案例结帐：
返回handleCheckout（state，action.cartPayload）；
从购物车中取出运动鞋：
从购物车返回HandlerRemovesNeakerFromCart（状态，操作.sneakerToRemove）；
案例接收\u运动鞋\u在\u购物车中：
返回手柄ReceiveSneakerInscart（状态、动作、cartSneakers）；
违约：
返回状态；
}
}

rootReducer.js

//导入在我的代码库中
const rootReducer=combinereducer({
着陆：着陆减速器，
仪表板：仪表板减速器，
列表：listingsReducer，
});
导出默认rootReducer；

仪表板减速器

//导入在我的代码库中
导出常数仪表板减速器=组合减速器({
用户运动鞋：dashSharedReducer，
shoppingCart:dashShoppingCartReducer，
});

DashCart.jsx

从“React”导入React；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“/DashCartTable.jsx”导入DashCartTable；
从“/../../actionCreators/Dashboard/DashShoppingCart.js”导入*作为DashCartActions；
功能DashCart（道具）{
var checkOut=（）=>props.actions.checkOut（props.cartseakers）；
返回(
结账
);
}
函数MapStateTops（状态）{
返回{
cartSneakers:state.dashboard.shoppingCart
}
}
功能图DispatchToprops（调度）{
返回{
操作：bindActionCreators（DashCartActions、dispatch）
}
}
导出默认连接(
MapStateTops，
mapDispatchToProps
)（DashCart）；

DashCartTable.jsx

从“React”导入React；
功能项目（道具）{
var remove=（）=>props.actions.removeSneakerFromCart（props.key）；
返回(
{道具。运动鞋。运动鞋名称}
条件：{props.sneaker.Condition}

尺寸：{props.sneaker.Size}

重新发布：{props.sneaker.reRelease}

${道具.运动鞋.价格}

数量：{props.sneaker.Quantity}

去除
);
}
导出默认项目；

DashCartItem.jsx

从“React”导入React；
从“/DashCartItem.jsx”导入DashCartItem；
功能表（道具）{
var DashCartItemsList=props.cartSneakers.map（（运动鞋，钥匙）=>{
});
返回(
{DashCartItemsList}
);
}
导出默认表；

问题肯定出在这里：

function mapStateToProps(state) {
  return {
    cartSneakers: state.dashboard.shoppingCart
  }
}

假设

dashShoppingCartReducer

位于

dashboardReducer.js

中，则

shoppingCart

键不存在。从上面那一行中删除

shoppingCart

键，或者将

shoppingCart

键添加到您的状态

更新 无视上述情况。我不知道您使用的是嵌套的

组合减速机

我现在认为问题在于

DashCartItem

。由于您使用的是ImmutableJS，因此应该使用

props.sneaker.get（'sneakerName'）

而不是

props.sneaker.sneakerName

访问字段

更新2 使用箭头函数时要小心。它们只有在不使用大括号的情况下才具有隐式返回

以下操作不起作用：

var DashCartItemsList = props.cartSneakers.map((sneaker, key) => {
  <DashCartItem sneaker={sneaker} key={key} remove={props.removeSneakerFromCart}></DashCartItem>
});

var DashCartItemsList=props.cartSneakers.map（（运动鞋，钥匙）=>{
});

改为：

var DashCartItemsList = props.cartSneakers.map((sneaker, key) => {
  return <DashCartItem sneaker={sneaker} key={key} remove={props.removeSneakerFromCart}></DashCartItem>
});

var DashCartItemsList=props.cartSneakers.map（（运动鞋，钥匙）=>{
返回
});

或者要使用隐式返回，请使用括号

var DashCartItemsList = props.cartSneakers.map((sneaker, key) => (
  <DashCartItem sneaker={sneaker} key={key} remove={props.removeSneakerFromCart}></DashCartItem>
));

var DashCartItemsList=props.cartSneakers.map（（运动鞋，钥匙）=>(
));

请同时包含您的存储和reducer代码。好的，我现在就这样做，还有定义configureStore的文件。查看状态的结构非常重要。还有一件事：rootReducer文件。@DavidWalsh奇怪的是，如果我使用存储状态树中的有效负载单击“签出”，签出操作创建者将被调度。但是没有填充组件。

dashShoppingCartReducer

确实存在于

dashboardReducer

中，在devtools中，它向您显示状态树，并且它具有以下``状态：{dashboard:{shoppingCart:{0:{..}}}“``我只是不知道为什么组件没有收到它。代码中定义的

shoppingCart

在哪里？示例对象中缺少它。它是在