Редукс редуктор не возвращает обновленное состояние в пользовательский интерфейс

Question

У меня есть регистр редуктора, и в этом случае предполагается добавить комментарий и обновить пользовательский интерфейс новым комментарием,

В значительной степени вы добавляете комментарий, и он будет отображаться под остальными комментариями. как только вы это сделаете, логика по какой-то причине не возвращает новое состояние.

Что может быть причиной этого? И если честно, я не уверен в том, что я делаю, я довольно нов, когда дело доходит до обновлений состояния нормализатора редуктора.

Только при обновлении я вижу новый комментарий.

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

Answer 1

Не уверен, потому что я не вижу форму вашего 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,
  }

Вместо этого вы должны делать что-то вроде этого, больше информации в Redux docs :

case POST_COMMENT_SUCCESS:
  return {
    ...state,
    comments: {
      ...state.comments,
      [action.data.id]: action.data
    }
  }

В качестве альтернативы, вы можете использовать Immer , чтобы упростить ваши редукторы, я использую его, и мне это нравится. Это немного странно, потому что вы можете использовать методы мутации, чтобы изменить draft, но было бы здорово, если вы хотите иметь более простые редукторы. Ваш код с Immer был бы намного проще:

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

С Immer вам просто нужно изменить (или изменить) объект draft, если значение, которое вы назначаете, отличается от того, которое выИмея в состоянии, он сгенерирует для вас новый объект, в противном случае он вернет состояние.

Надеюсь, это поможет.