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

Question

我有一个 Thread 组件负责呈现特定线程的消息和一个组件来提交新消息。线程组件的状态由 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。