javascript - 使用 React 和 Redux 在 UI 中处理成功的 REST POST 操作的常见方法是什么

Question

我有一个负责呈现特定线程消息的线程组件和一个提交新消息的组件。线程组件的状态由Redux管理，它提供FETCH_MESSAGES和POST_MESSAGE等异步操作。下面是简化的伪代码。

class Thread {
  messages: [] // This is actually a prop connected to Redux
  render = () => {
    messages.map(messageComponent)
    <SubmitMessageComponent />
  }
}

当服务器用 id 发回对象时，在 UI 中处理新消息成功 POST 操作的常用方法是什么？将该对象推送到先前获取的消息的数组是否安全，或者我应该再次获取所有消息以确保一致性吗？第一次操作看似高效但脱节。我正在考虑如何正确处理来自不同来源的并发 REST API 操作。重新获取所有内容始终可以确保状态的一致性，但在性能方面会产生冗余(想象一下有接近无限数量的消息)

是否有事实上的方法来处理 Web 应用程序用户界面中的创建操作？

Answer 1

处理此问题的典型方法是通过处理 POST_MESSAGE 操作的“消息” reducer 来减少状态，如您在问题中所述，即如下所示:

export default function reducer(state = initialState, action = {}) {
    switch (action.type) {
        [...]
        case POST_MESSAGE:
            return {
                ...state,
                messages: {
                    ...state.messages,
                    [action.id]: { ...action.message }
                }
            }
        [...]
    }
}

您没有解释如何以及何时获取新消息，但如果您使用某些 Websocket，消息将从服务器推送到您的应用程序。

也许其他解决方案可能是向 POST_MESSAGE 操作添加一些时间戳，这样服务器就可以仅使用该时间新附加的消息进行响应，但不确定它是否真的是 RESTfull。