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

What is the common way to handle successful REST POST operation in UI using React and Redux

本文关键字：操作 POST 常见 方法 是什么 REST 处理 Redux React UI 成功      更新时间：2023-09-26

我有一个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应用程序的用户界面?

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

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。

相关文章：