React Redux：使用CombineReducers后无法映射状态

Question

我是React / Redux的新手。

我正在制作简单的购物车。 现在，我正在尝试显示本地json文件中的数据。 数据的状态如下：{items： data here }。 当我在顶级reducer文件上编写reducer时，我可以映射这些项目。 但是，如果我使用CombineReducers，则会出现错误消息：“ this.props.items未定义：返回this.props.items.slice（0，20）.map（item =>“。

如何访问和映射项目？

Reducer＃1 cartReducer.js

import data from "../data.json";

const INITIAL_STATE = {
    items: data,
    addedItem: [],
    total: 0
}

const cartReducer = (state = INITIAL_STATE, action) => {
    return state;
}

export default cartReducer;

Reducer＃2

import { combineReducers } from 'redux';
import items from './cartReducer';

export default combineReducers({
    items
})

显示项目列表的组件

import React from 'react';
import { connect } from 'react-redux';
import { addToCart } from '../actions';

class ItemList extends React.Component {

    renderList() {
      return this.props.items.slice(0, 20).map(item => {
        return (
          <div className="card" key={item.id}>
                <span className="card-title">{item.name}</span>                
                <p>{item.content}</p>
                <p><b>Price: {item.price}$</b></p>    
          </div>
        )
      })      
    }

    render() {
        return (
          <div>
             {this.renderList()}
           </div>
        )
    }
}

const mapStateToProps = state => {
  return {
    items: state.items
  }
}

const mapDispatchToProps = dispatch => {
  return {
    addToCart: (id) => {
      dispatch(addToCart(id))
    }
  }
}

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

JSON数据

[
  {
      "id": 201,
      "name": "Nulla",
      "price": 207,
      "subCategoryId": 101,
      "categoryId": 1,
      "rate": 2.44,
      "content": "Culpa sed tenetur incidunt quia veniam sed mollitia exercitationem. Laboriosam reprehenderit laborum pariatur ea rem qui inventore. In asperiores dignissimos temporibus et. Beatae consequatur corrupti nam praesentium.",
      "review": 78,
      "typeVariant": "D",
      "colorVariant": "5",
      "imageUrl": "https://placeholdit.imgix.net/~text?txtsize=55&txt=137x945&w=137&h=945"
    },{
      "id": 202,
      "name": "Corporis",
      "price": 271,
      "subCategoryId": 101,
      "categoryId": 1,
      "rate": 2.18,
      "content": "Nam incidunt blanditiis odio inventore. Nobis voluptatum quibusdam laboriosam a numquam. Delectus sequi ipsa possimus ratione repellendus quibusdam. Molestiae fuga laudantium natus dolorem.",
      "review": 67,
      "typeVariant": "A",
      "colorVariant": "4",
      "imageUrl": "https://dummyimage.com/931x785"
    }
]

Answer 1

使用combineReducers创建一个化简器时，您将创建一个化简器，该化简器将调用传递给它的每个化简器，并将其结果收集到一个新的状态对象中。每个减速器状态的键将是您在传递给combineReducers的对象中为相应的减速器提供的键。

如果仅使用减速器，则结果状态将与您预期的一样：

{
    items: Array
    addedItem: Array
    total: number
}

export default combineReducers({
    items
})

是语法糖吗

export default combineReducers({
    items: items
})

这意味着最终状态将如下所示：

{
    items: {
        items: Array
        addedItem: Array
        total: number
    }
}

这样，您可以使用items来访问处于状态的state.items.items数组

Answer 2

您不绑定renderList，这就是为什么props未定义的原因。 “ This”是指调用函数（renderList），而不是您的组件。而且该功能没有场道具，因为它只是一个功能。您必须像这样在构造函数中绑定它：this.renderList = this.renderList.bind（this）;或使用像这样的数组函数：const renderList =（）=> {...}。现在，“ this”是指组件，并且将定义道具。

Answer 3

您必须在分派中传递类型

const mapDispatchToProps = dispatch => {
  return {
    addToCart: id => {
      dispatch({ type: 'name of your type' });
    }
  };
};

然后向减速器中添加条件

const cartReducer = (state = INITIAL_STATE, action) => {
   if(action.type === 'name of your type')
      return state;
}