reactjs - redux 中 reducer 中的先前状态与 react

Question

这是我的 reducer 的样子:

export default function catalogReducer(state = initialState.catalogItems, action){
  switch (action.type) {
    case types.LOAD_CATALOG_SUCCESS:
      return {
         count:action.count,
        products :[...state['products'],
        action.catalogItems  ?
        [...action.catalogItems['products']]
          :
          []
      ]
    default:
      return state;
  }
}

我想做的事情:

1. 这是一个用于加载目录项的 reducer

2. 项目来自分页 api。

3. 我需要将来自 api 的结果添加到现有列表中产品

问题:

我希望 state 参数应该与之前的状态相关联，但没有，它总是从 initialState 获取值，我在应用程序启动时用它来初始化状态。

这是为什么呢？解决方法是什么？

基本上我需要通过分页 api 返回完整的项目集，而不仅仅是 products 数组中给定页面的产品。我最终得到的只是上次 api 调用的产品数组，因为 state.products 总是被初始化为一个空数组

此外，一般来说，我对在 React 和 Redux 中处理分页 API 感到非常困惑，无法找到一个简单的示例。

将不胜感激。

这是 initialState.js 文件的样子:

import cookie from 'react-cookie';

export default {
 categories:[],
  sessionId: cookie.load('sessionId') || '',
  youMayLikeItems : [],
  catalogItems: {'products': []}
}

//这个文件是为了集中store中状态的初始化

Answer 1

基本上，您需要记住您不应该改变状态。

export default function catalogReducer(state = initialState, action) {
  switch (action.type) {
    case types.LOAD_CATALOG_SUCCESS:
      return {
        ...state,
        catalogItems: {
          count: action.count,                          
          products: [
            ...state.catalogItems['products'],
            action.catalogItems  ?
              action.catalogItems['products']
              :
              {}
          ]
        }
  default:
    return state;
  }
}

您可以找到更多有用的示例 here

此外，最好在没有深层对象的情况下制作简单状态(docs)并使用 Immutable.js