изменение состояния избыточности не вызывает повторного рендеринга

Question

это мой интерфейс состояния

case UPDATE_CONVERSATION_ACTION:
  var list = state.messageList ? state.messageList.length > 0 ? state.messageList : [] : [];
  if(list.length > 0) {
    let val = state.messageList.findIndex(e=>e.postId === action.payload[0])
    if(val !== -1) {
      var messageItem = {} as MessageListItem

      var item = state.messageList[val];
      var messages = item.messages;
      messages.push(action.payload[1]);
      messageItem.messages = messages
      messageItem.postId = action.payload[0];
      list[val] = messageItem
    }else {
      list.push({postId: action.payload[0],messages : [action.payload[1]]})
    }


  }
  else {
    list.push({postId: action.payload[0],messages : [action.payload[1]]})
  }

  return {
    ...state,
    messages: [...state.messages, action.payload],
    messageList :list
  };

---

<FlatList

    data={this.props.messagesList  ? this.props.messagesList.length > 0  ? this.props.messagesList.find(e=> e.postId === this.state.postId)?.messages ?? [] : [] : []}renderItem={({ item }) => (
        this.renderItems(item)
    )}
    // extraData={selected}
  />

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

я действительно вносил изменения, такие как

var existMessageList = state.messageList.findIndex(e => e.postId === action.payload[0]);

  return {
    ...state,
    messageList : existMessageList !== -1 ? state.messageList.map((val,i)=> val.postId === action.payload[0] ? {...val, messages : state.messageList[i].messages.concat(action.payload[1])} : val) : 
    [...state.messageList,{postId : action.payload[0],messages : [action.payload[1]]}]
  };

это работало благодаря

Answer 1

Вы изменяете существующее состояние со всеми строками .push() и list[val] =. Пожалуйста, не делайте этого.

См. страницу документации Redux на "Шаблонах неизменного обновления" и пост Полное руководство по неизменности в React и Redux для получения информации. о том, как правильно писать неизменяемые обновления.

Я настоятельно рекомендую использовать наш официальный пакет Redux Toolkit . У него есть configureStore API, который по умолчанию перехватывает мутации, а createSlice API фактически позволяет вам писать "мутирующие" логи c, которые безопасно превращаются в правильные неизменяемые обновления.