Question

我看了一堆使用嵌套Reducer的例子，但我遇到了一个非常奇怪的问题。

我有以下初始状态：

window.store = configureStore({
  slider: {
    mainImageIndex: 0,
    pageNum: 1,
    perPage: 4, // Per supplied requirements
  },
});

我的index.js reducer中的以下内容（不包括所有导入）：

export default combineReducers({
  searchPhotos,
  slider: combineReducers({
    mainImageIndex: setMainImage,
    pageNum: nextPage,
    perPage: setPerPage,
  }),
  form: reduxFormReducer, // mounted under "form"
});

我的setMainInage.js减速器：

export default (state = {}, action) => {
  switch (action.type) {
    case 'SET_MAIN_IMAGE':
      return {
        ...state,
        mainImageIndex: action.mainImageIndex,
      };
    default:
      return state;
  }
};

附加在redux devtools的屏幕抓取之前和之后。请注意，在调用SET_MAIN_IMAGE之后，滑块节点内的层次结构会发生变化。出于某种原因，它不是仅仅更新mainImageIndex，而是在原始框架下嵌套一个新的mainImageIndex键。任何人都知道可能导致什么？

Answer 1

您需要检查的是action包含哪些内容？

它似乎包含类似的东西

{
    type: 'SET_MAIN_IMAGE',
    mainImageIndex: {
        mainImageIndex: 2
    },
}

你的减速机就像

<强> 1。第一步

case 'SET_MAIN_IMAGE':
    return {
        ...state,
        mainImageIndex: action.mainImageIndex, 
    };

<强> 2。第二步

case 'SET_MAIN_IMAGE':
    return {
        mainImageIndex: 0,
        pageNum: 1,
        perPage: 4,
        mainImageIndex: action.mainImageIndex, 
    };

第3。第三步

case 'SET_MAIN_IMAGE':
    return {
        mainImageIndex: 0,
        pageNum: 1,
        perPage: 4,
        mainImageIndex: {
            mainImageIndex: 2
        }, 
    };

<强> 4。第四步

case 'SET_MAIN_IMAGE':
    return {
        pageNum: 1,
        perPage: 4,
        mainImageIndex: {
            mainImageIndex: 2
        }, 
    };

你应该做什么

更改action有效负载以发送类似

的内容

{
    type: 'SET_MAIN_IMAGE',
    mainImageIndex: 2
}

或更好

{
    type: 'SET_MAIN_IMAGE',
    payload: {
        mainImageIndex: 2,
    }
}

然后在 reducer

中使用

case 'SET_MAIN_IMAGE':
    return {
        ...state,
        ...action.payload,
    };

希望它有所帮助。

Answer 2

所以我能够通过为滑块创建一个新的reducer来解决问题，并将所有动作放在一个reducer中，而不是每个文件都有一个函数。然后我就可以这样做：

export default combineReducers({
  searchPhotos,
  slider,
  form: reduxFormReducer, // mounted under "form"
});

我认为必须有一种方法可以使用多个文件来完成它，但是将一部分状态的所有操作放在同一个reducer中也许是有意义的。

使用combinereducers坚持使用嵌套的redux reducer

2 个答案: