Reactjs Redux减速器isn'；t将更新的状态返回到UI

我有一个reducer案例，这个案例应该添加一个注释，并用新注释更新UI

基本上你添加了一条注释，一旦你添加了注释，它就会显示在其余的注释下面，因为某种原因，逻辑不会返回新的状态

这可能是什么原因？老实说，我不确定我在做什么，当涉及到规范化器状态更新时，我是相当新的

只有在刷新时，我才能看到新的注释

const initialState = {
  allIds:[],
  byId:{},
};

const allIds = (state = initialState.allIds, action) => {
  switch (action.type) {
    case  FETCH_IMAGES_SUCCESS:
      return action.images.reduce((nextState, image) => {
        if (nextState.indexOf(image.id) === -1) {
          nextState.push(image.id);
        }
        return nextState;
      }, [...state]);
      case UPLOAD_IMAGE_SUCCESS:
        console.log(action.data)
        return [action.data.id, ...state];

      case POST_COMMENT_SUCCESS:
        console.log(action)
        return [action.data.id, ...state];
    default:
      return state;
  }
}
const image = (state = {}, action) => {
  switch (action.type) {
    case POST_COMMENT_SUCCESS:
      return [...state.comments, action.data, ...state.comments]

    default:
      return state;
  }
}

const byId = (state = initialState.byId, action) => {
  switch (action.type) {
    case FETCH_IMAGES_SUCCESS:
      return action.images.reduce((nextState, image) => {
        nextState[image.id] = image;

        return nextState;
      }, {...state});
    case POST_COMMENT_SUCCESS:
      console.log(action.data) // renders new commnent
      return {
        ...state,
        ...state.comments,
        [action.data.id]: action.data,

      }
    case UPLOAD_IMAGE_SUCCESS:
      console.log(action)
      return {
        ...state,
        [action.data.id]: action.data,
      };
    default:
      return state;
  }
}

---

不确定，因为我看不到您的

byId

对象的形状，但我认为问题可能在这里：

case POST_COMMENT_SUCCESS:
  return {
    ...state, // here you are spreading the whole state object
    // and here you are spreading state.comments at the same level, NOT nested:
    ...state.comments,
    // Again same thing here, not nested:
    [action.data.id]: action.data,
  }

相反，您应该这样做，更多信息：

或者，你可以用它来简化你的减缩器，我正在使用它，我很喜欢它。这感觉有点奇怪，因为你可以使用变异方法来修改它的

草稿

，但如果你想有更简单的减缩器，那就太好了。使用Immer编写的代码要简单得多：

case POST_COMMENT_SUCCESS:
  draft.comments[action.data.id]: action.data,
  return;

使用Immer，您只需修改（或变异）

草稿

对象，如果您指定的值与您在状态中的值不同，它将为您生成一个新对象，否则它将返回状态

---

希望能有所帮助。

为什么要将状态的键/值对分离为单独的变量，而不是在一个reducer中包含一个状态？嘿@Christophengo好久不见了，这是因为状态规范化。将其转换为规范化结构一直是一项挑战。这是我在规范化之前的老代码，看看reducer代码是多么的不平坦，这就是为什么我想让它更容易访问嵌套数据的原因！希望你做得很好。这个任务看起来像是噩梦，我知道，但我需要一种方法来轻松访问深度嵌套的对象等等。我一直在调试，直到找到解决方案。即将尝试一下，我会让你知道它是如何运行的。

返回{…state，state.comments:{…state.comments，{…state.comments，[action.data.id]：action.data}

看起来像是语法错误我复制粘贴了你的代码，得到了语法错误，我认为你不能做state.comments:{}你可以做state:{}但不能做state.comments:{}有什么解决办法吗？

case POST_COMMENT_SUCCESS:
  draft.comments[action.data.id]: action.data,
  return;