I am trying to update the latest message for a specific room in the array of rooms. I can see the action and payload using redux devtools, but the state doesn’t change. No matter what approach I try, I always get: states are equal.

The addMessage reducer works just fine but for some reason the updateLatestRoomMessage doesn’t.

Any idea why?

const initialState: ChatState = {
  activeRoom: null,
  userMemberId: null,
  shouldScroll: false,
  rooms: [],
  messages: [],
  typingStatus: {},
};

export const chatSlice = createSlice({
  name: 'chat',
  initialState,
  reducers: {
    addMessage: (state, action: PayloadAction<any>) => {
      state.messages = [...state.messages, action.payload];
    },
    updateLatestRoomMessage: (state, action: PayloadAction<any>) => {
      const clonedRooms = _.cloneDeep(state.rooms);

      const index = clonedRooms.findIndex(
        (room) => room.id === action.payload.roomId
      );

      if (index !== -1) {
        clonedRooms[index].roomMessages = [action.payload];
      }

      state.rooms = [...clonedRooms];
    }
  },
});

export const {
  addMessage,
  updateLatestRoomMessage,
} = chatSlice.actions;

export const selectChat = (state: RootState) => state.chat;

export default chatSlice.reducer;