JavaScript – 在Redux/Flux中,乐观更新的行动商店是一个很好的方法?

我在React Flux应用程序中一直在乐观的更新,并看到两件事情:

>如果用户在存在某些未完成的操作时尝试关闭窗口,会发生什么。例如在Facebook中,即使没有真正持久化,这个消息也会出现在墙上(这是更乐观的更新,对用户来说更为敏感的应用程序)。但是,如果用户发布在墙上并立即关闭应用程序(在注销或窗口关闭),该帖子可能会失败,他将不会收到警报。
>我不喜欢商店管理自己的实体(例如消息)的想法和为持久化消息而触发的动作的情况(加载,成功,失败?)。它混合了东西

所以我在这个工作,并创建一个ActionStore来管理由组件触发的动作的状态。 Here is源代码和here is一个现场演示。

它或多或少是这样的:

>组件层次结构的根(在redux中的容器)获取一个新动作的nextId,并将其传递给他的孩子像道具(这是丑陋的)。
>一个子组件触发一个动作:它将actionId保留在存储之后并调用动作创建者。
>动作创建者创建一个新的Action并向中间件返回一个函数。
>从Action返回的函数使用API​​调用创建一个新的Promise,并调度类型为XX_START的操作。
> ActionStore听XX_START操作并保存。
>子组件接收新状态,并使用保存的id查找操作,并询问当前情况:加载,成功或失败。

我已经做到这一点主要是为了将“实体”的状态与动作的状态分开,但允许使用相同的有效载荷进行重新触发动作(当服务器暂时关闭时,如果收到500响应状态,这可能会很有用)用户松动信号)。

此外,拥有操作的存储允许在用户注销或关闭窗口之前容易地询问他们是否处于待决的操作。

注意:我正在使用针对Rest API的单一应用页面Web应用程序,我不认为在服务器端渲染上使用它

这是一个可行的选择创建一个ActionStore或者我打破了一些Redux / Flux基础?
这可能会终止使用的可能性Re热量重新加载和时间旅行?

你应该没有怜悯的回答,我可能做了一堆丑陋的事情,但我正在学习React / Redux。

最佳答案
对于可能有点迷惑的未来读者:我们不再称这些功能“商店”:我们称之为reducers.所以问题是关于a reducer remembering actions

我个人不喜欢你在那里提出的方法。你将逻辑放在动作中,并为此使用继承。相反,Redux将动作规定为没有逻辑的普通对象。他们不应该“知道”如何更新某些状态,他们不应该坚持 – 而是应该描述发生了什么。

我认为在Redux中实现乐观更新的方法与implement Undo in Redux相似,反过来也是Elm architecture的启发。您的想法是,您应该编写一个使用reducer(和一些选项)并返回reducer的函数:

function optimistic(reducer) {
  return function (state, action) {
    // do something?
    return reducer(state, action);
  }
}

你会像普通的减速机一样使用它:

export default combineReducers({
  something: optimistic(something) // wrap "something" reducer
})

现在它只是将状态和动作传递给它所包含的reducer,但它也可以“记住”动作:

function optimistic(reducer) {
  return function (state = { history: [] }, action) {
    // do something with history?
    return {
      history: [...state.history, action],
      present: reducer(state.history[state.history.length - 1], action)
    };
  }
}

现在它积累了历史领域的所有行动。

再次,这本身不是很有用,但你可以看到如何实现这样一个更高级的reducer:

>通过其ID跟踪待处理的异步操作,并在查看状态为“request”的操作时开始记录历史记录;
>当收到状态为“done”的动作时,重置历史记录;
>当接收到状态为“fail”的动作时,将历史记录调整为不包含状态为“request”的初始动作,并重新运行reducer以重新计算当前状态,就像该请求从未发生过的一样。

当然,我没有提供实现,但这应该让您了解如何以Redux方式实现乐观更新。

更新:根据OP的评论,redux-optimist似乎这样做。

转载注明原文:JavaScript – 在Redux/Flux中,乐观更新的行动商店是一个很好的方法? - 代码日志