从Redux Observable返回一个Promise

时间:2017-04-12 21:19:26

标签: redux rxjs redux-observable

也许我正在考虑这个错误,但我使用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中有一种干净的方法吗?基本上从一个动作返回一个promise,调用一个epic,一旦observable完成就会返回解析或拒绝。

1 个答案:

答案 0 :(得分:6)

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

但是,如果确实确实希望这样做,您可以编写(或使用现有的)中间件,该中间件返回dispatch的Promise,当其他某些指定的操作有被派遣(大概是你的史诗)。 redux-wait-for-action是一个例子(不是推荐,但因为我还没有使用过任何推荐)

请记住,Promise通常不会被取消,因此您可能会意外地创建组件开始等待操作的情况,用户离开该页面并卸载组件,并且您仍然在等待其他行动 - 这可能会导致以后的怪异,比如他们回到那个页面等等。

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