javascript - 使用 redux-thunk 和 redux-observable

Question

我正在使用 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 应该允许这样做，我是否遗漏了什么？

Answer 1

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

applyMiddleware(thunkMiddleware, epicMiddleware)

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

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