redux 状态更改不会触发重新渲染

Question

this is my state interface

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

现在我从套接字监听数据，我得到了数据调度并更新列表，它没有问题，但反应没有渲染我的平面列表组件，但它改变了。仅当反应渲染组件我按下输入中的任何键时，才反应渲染它消息

我确实做了类似的改变

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] = 行来改变现有状态。请不要那样做。

有关如何正确编写不可变更新的信息，请参阅 the Redux docs page on "Immutable Update Patterns" 和帖子 The Complete Guide to Immutability in React and Redux。

我强烈推荐使用our official Redux Toolkit package。它有一个configureStore API，默认情况下会捕获突变，createSlice API 实际上允许您编写“突变”逻辑，该逻辑可以安全地转换为正确的不可变更新。