Question

我正在使用react v0.14.3，redux v3.0.5，react-redux v4.02和immutable v3.7.6。我试图使用react-redux将redux存储与react组件连接在一起，但我似乎无法将存储数据传递给组件。我的控制台没有错误，在我的redux-devtools中，我看到整个状态树。在我的index.js组件中，我正确设置了Provider组件。我希望这是一个我可能忽略的简单错误。

商店＆amp;提供商

import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './../reducers/rootReducer.js';
import DevToolsx from './../components/DevTools/Devtools.jsx';

// var createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);

var finalCreateStore = compose(
  applyMiddleware(thunkMiddleware),
  // window.devToolsExtension ? window.devToolsExtension() : f => f
  DevToolsx.instrument()
)(createStore);

export default function configureStore(initialState) {
  var store = finalCreateStore(rootReducer, initialState);
  return store;
}

//index.js
var store = configureStore();

render(
  (
    <Provider store={store}>
      <Router history={history} >
        ...
      </Router>
    </Provider>

    ),document.getElementById('app'));

减速

//imports are in my codebase

var sample = I.List.of(
  I.Map({
    sneakerImg: 'someLinkToSneakerImg1',
    sneakerName: 'Air Jordane 1',
    price: 120,
    condition: 10,
    size: 12,
    reRelease: true,
    quantity: 1
  })
);

export function dashShoppingCartReducer (state = sample, action ) {
  switch (action.type) {

    case CHECKOUT:
      return handleCheckout(state, action.cartPayload);

    case REMOVE_SNEAKER_FROM_CART:
      return handleRemoveSneakerFromCart(state, action.sneakerToRemove);

    case RECEIVE_SNEAKERS_IN_CART:
      return handleReceiveSneakersInCart(state, action.cartSneakers);

    default:
      return state;
  }
}

rootReducer.js

//imports are in my codebase

const rootReducer = combineReducers({
  landing: landingReducer,
  dashboard: dashboardReducer,
  listings: listingsReducer,
});

export default rootReducer;

dashboardReducer

//imports are in my codebase

export const dashboardReducer = combineReducers({
  userSneakers: dashSharedReducer,
  shoppingCart: dashShoppingCartReducer,
});

DashCart.jsx

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import DashCartTable from './DashCartTable.jsx';
import * as DashCartActions from './../../actionCreators/Dashboard/DashShoppingCart.js';
function DashCart (props) {

  var checkOut = () => props.actions.checkout(props.cartSneakers);

  return (
    <div className="DashCart">
      <DashCartTable cartSneakers={props.cartSneakers} actions={props.actions}></DashCartTable>
      <button onClick={checkOut} className="checkout btn btn-default">CheckOut</button>
    </div>
  );
}

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

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(DashCartActions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DashCart);

DashCartTable.jsx

import React from 'react';
function DashCartItem (props) {

  var remove = () =>  props.actions.removeSneakerFromCart(props.key);

  return (
    <div className="DashCartItem">
      <div className="pull-left">
        <img className="itemImg"src="./../../../assets/images/creator.jpg" />
      </div>
      <div className="content pull-left">
        <h3 className="itemTitle">{props.sneaker.sneakerName}</h3>
        <p>Condition: {props.sneaker.condition}</p>
        <p>Size: {props.sneaker.size}</p>
        <p>Re-release: {props.sneaker.reRelease}</p>
      </div>
      <div className="content pull-right">
        <p>${props.sneaker.price}</p>
        <p>Quantity: {props.sneaker.quantity}</p>
        <button onClick={remove} className="btn btn-default">Remove</button>
      </div>
    </div>
  );
}

export default DashCartItem;

DashCartItem.jsx

import React from 'react';
import DashCartItem from './DashCartItem.jsx';
function DashCartTable (props) {

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

  return (
    <div className="DashCartTable">
      {DashCartItemsList}
    </div>
  );
}

export default DashCartTable;

Answer 1

~~问题肯定在于：~~

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

~~假设dashShoppingCartReducer居住在dashboardReducer.js，则shoppingCart密钥不存在。从上面的该行中删除shoppingCart键，或在您的州中添加shoppingCart键。~~

更新

无视上述内容。我没有意识到你使用嵌套的combineReducers。

我现在认为问题在于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((sneaker, key) => {
  return <DashCartItem sneaker={sneaker} key={key} remove={props.removeSneakerFromCart}></DashCartItem>
});

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

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

react-redux没有连接存储到反应组件