React-Redux：改变状态以使用 redux-undo 模拟动作副作用

Question

我有几个字段，在更新时会更改图像的 href（这实际上是根据文本输入生成 PNG 的外部 API 的端点）。

当该图像加载时，它会触发更新另一个组件以匹配图像大小的操作（只有在图像加载完成后才能获取）。我设置 redux-undo 以从历史记录中排除该操作，因为它不是用户操作。

这是我的问题：当我执行一个不会触发更改的操作，然后撤消该操作时，状态是错误的，因为大小在用户操作之间发生了变化。

我的一个想法是改变状态（yeesh）：

在减速器

case 'UPDATE_TARGET_SIZE':
    /**
    *  HERE BE DRAGONS
    *  I am also mutating the current state since this action needs to
    *  NOT count as an user action
    */
    state.targetWidth = action.targetWidth
    state.targetHeight = action.targetHeight

    return {
        ...state
    }

虽然它没有明显的缺点......但感觉就像一个肮脏的黑客。只要我知道我为什么要改变状态，是否有另一种方法这样做或者它是否安全？

像 redux-saga 这样的库可以帮助我吗？我承认我没有阅读它的文档，因为我没有进行 "real" API 调用并且我不想有一个矫枉过正的解决方案。

编辑：

这是一个更好的例子：

我输入了文本输入，导致 href 发生变化。加载新图像，触发从历史记录中排除的操作。在那一点上，历史没有最后一个动作的修改。

如果我执行复制状态的那部分的操作（在右侧的减速器中），则状态很好。如果我做一个只接触另一个减速器的动作，它仍然是错误的。

所以当我按撤消时，我撤消到错误的状态。但是如果我得到那个改变状态的动作，那么它总是有效的。

Answer 1

Can a lib like redux-saga help me? I admit I have not read its documentation since I am not making "real" API calls and I don't want to have an overkill solution.

Redux-saga 允许执行自定义副作用并引入进程管理器，因为它有自己的事件循环。应用于原始任务，saga可以帮助及时拆分请求和响应的动作。

典型用例是使用后缀 _REQUEST 发出操作，例如 LOAD_IMAGE_REQUEST，它使用 saga 管理器进行拦截并且不会传递到 reducer。然后在异步操作完成后，saga 会发出 _SUCCESS 或 _FAILURE 之类的操作，具体取决于操作是否成功。该动作传递到商店并与减速器一起应用。

另外，还有一种意识形态叫做optimistic update。在那种情况下 _REQUEST 事件传递到存储中，但如果操作失败，saga 发送补偿事件，回滚乐观操作

React-Redux：改变状态以使用 redux-undo 模拟动作副作用

React-Redux: Mutating the state to emulate action side-effects with redux-undo

reactjs

redux

react-redux

immutability

undo-redo