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

时间:2017-10-19 14:08:07

标签: reactjs redux react-redux immutability undo-redo

我有一些字段,在更新时,更改图像的href(实际上是外部API的端点,它根据文本输入生成PNG)。

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

这是我的问题:当我执行不触发更改的操作时,撤消该操作,状态错误,因为用户操作之间的大小已更改。

我的想法是改变国家(yeesh):

在reducer中

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这样的lib可以帮助我吗?我承认我没有阅读其文档,因为我没有进行“真正的”API调用,而且我不想有一个矫枉过正的解决方案。

修改:

这是一个更好的例子:

我输入一个文本输入,这会导致href改变。加载新图像,触发从历史记录中排除的操作。此时,历史记录没有修改最后一个动作。

如果我执行复制该部分状态的动作(在右侧减速器中),状态就可以了。如果我做的动作只涉及另一个减速器,那么它仍然是错误的。

所以当我按下撤消时,我会撤消到错误的状态。但如果我采取行动来改变状态,那么它总是有效的。

1 个答案:

答案 0 :(得分:1)

  

像redux-saga这样的lib可以帮助我吗?我承认我没看过它   文件,因为我没有制作"真实" API调用,我不想要   有一个矫枉过正的解决方案。

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

典型用例是使用postfix _REQUEST发出动作,例如LOAD_IMAGE_REQUEST,它与saga管理器拦截并且不会传递给reducers。然后,在完成异步操作后,saga会发出_SUCCESS_FAILURE - 类似操作,这取决于操作是否成功。这些操作传递到存储并应用reducers。

此外,还有一种名为optimistic update的意识形态。在那种情况下_REQUEST事件传递到商店,但如果操作失败,saga会发送补偿事件,这会回滚乐观动作