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

Question

我是 React/Redux 的新手。

我正在制作简单的购物车。 现在我正在尝试显示本地 json 文件中的数据。 数据的状态如下：{items: data here }。 当我在顶级 reducer 文件上编写 reducer 时，我可以映射这些项目。 但是，如果我使用 combineReducers 它会给我错误提示“this.props.items is undefined: return this.props.items.slice(0, 20).map(item =>”。

如何访问和映射项目？

减速机 #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;

减速机 #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

你必须在调度中传递类型

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;
}

Answer 2

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

如果你只使用你的 reducer，你的结果状态会如你所料：

{
    items: Array
    addedItem: Array
    total: number
}

export default combineReducers({
    items
})

是语法糖

export default combineReducers({
    items: items
})

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

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

因此，您可以使用state.items.items 访问您所在州的items 数组

Answer 3

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