将 redux-thunk 与 redux-observable 一起使用答案

【问题标题】：use of redux-thunk with redux-observable将 redux-thunk 与 redux-observable 一起使用
【发布时间】：2018-07-08 16:20:05
【问题描述】：

我正在使用 redux-thunk 来管理我的 react 应用程序中的异步内容，并且我想使用 redux-observable 来更轻松地管理复杂的异步流程（例如连接多个 Ajax 调用）。有没有办法在不修改已经完成的情况下这样做？

这是我的意思的一个例子：

const fetchSomeData = () => {
    return (dispatch, getState) => {
        doAnAjaxCall((err, response) => {
            if (err) return dispatch({type: 'ERROR', err})
            // do something
            return dispatch({type: 'SUCCESS', response})
        })
    }
}

是否可以在史诗中使用fetchSomeData？
由于 redux-thunk 是基于 promise 的 redux-observable 应该允许这样做，我是否遗漏了什么？

【问题讨论】：

我认为您仍然需要在史诗注册方面做一些工作。你可以使用 observable 来包装现有的 Promise。但我建议使用 redux-observable 和 remove redux-thunk 两者都很好，并且具有不同的处理异步操作的风格。我喜欢 redux-observable，所以我可能会有偏见。

标签： javascript reactjs rxjs5 redux-thunk redux-observable

【解决方案1】：

是的！你完全可以一起使用它们。只需将 redux-thunk 中间件放在 redux-observable 中间件之前。

applyMiddleware(thunkMiddleware, epicMiddleware)

https://stackblitz.com/edit/redux-observable-playground-8c7pd9?file=ping-pong.js

Redux 按照它们作为参数提供的顺序应用中间件，因此在这种情况下，我们希望 thunk 中间件吸收任何分派的 thunk，以便 thunk 函数本身永远不会达到 redux-observable（仅纯操作）。但是你的史诗仍然可以发送 thunk，因为 redux-observable 中间件在底层使用 store.dispatch。

【讨论】：

这个例子不再适用于最新的 redux-observable 版本。请帮助使用 epicMiddleware.run(rootEpic) @jayphelps 进行更新