3

也许我在想这个错误,但是我与 redux-thunk 一起使用的一个常见模式是返回一个 Promise,这样当某事完成或失败时,我可以在容器对象中执行一些额外的操作。


以 Thunk 为例:

动作创建者:

const action = ({ data }) => (dispatch) => 
    fetch(`some http url`)
    .then(response => {
        if(response.ok) {
             return response.json();
        }

        return Promise.reject(response);
    })

连接组件中的某处:

this.props.action("Some Data")
    .then(console.log)
    .catch(error => console.error("ERROR"));

在 Redux-Observable/Rxjs 中是否有一种干净的方式来做类似的事情?基本上从一个动作返回一个承诺,调用一个史诗,一旦 observable 完成返回 resolve 或 reject。

4

1 回答 1

8

一般来说,在使用 redux-observable/redux-saga 之类的东西时,我会尽量让人们远离这些模式。相反,如果您正在等待您调度的操作以更新商店的状态,请依赖该状态更新本身或您的减速器存储在有关它的状态中的某种事务元数据。例如{ transactions: { "123": { isPending: true, error: null } }

但是,如果您真的想这样做,您可以编写(或使用现有的)中间件,该中间件返回一个 Promise dispatch,当其他指定的操作(可能是您的史诗)被调度时,该中间件将解决。redux-wait-for-action就是一个例子(不是推荐,虽然因为我没有使用过)

请记住,Promise 通常是不可取消的,因此您可能会意外地造成组件开始等待操作,用户离开该页面并且组件已卸载,而您仍在等待其他操作的情况——这以后可能会导致奇怪,比如如果他们回到那个页面等等。


如果您正在等待连锁副作用,那属于您的史诗。启动史诗监听的单个动作,产生副作用,然后发出另一个动作以表示完成。另一个史诗会监听该完成动作,然后开始另一个副作用,等等。如果你愿意,你可以将它们全部放在一个单一的史诗中,但我发现分离更容易测试和重用。

于 2017-04-12T22:52:15.913 回答