7

我使用redux-actions和redux-promise-middleware来调度动作，并使用 TypeScript2.1来async await提供支持。

这是一个同时使用redux-actions和redux-promise-middleware

// create an async action
const fooAction = createAction('FOO', async () => {
  const { response } = await asyncFoo();
  return response;
});

// use async action
fooAction('123')

这是一个动作链接的例子，只使用redux-promise-middleware

const foo = () => dispatch => {
  return dispatch({
    type: 'TYPE',
    payload: new Promise()
  })
  .then(() => dispatch(bar()));
}

如何链接 inredux-promise-middleware可以与 一起使用redux-actions？

4

2 回答 2

5

您必须记住，即使async await看起来是同步的，它在后台使用asyncPromise，并且无论您是否使用，函数都将始终返回 Promise await。

由于 的第二个参数createAction是您的有效负载创建者，因此没有什么可以阻止您使用生成的对象。

这是基于您的初始代码的示例：

const fakeCall = () => new Promise(resolve => {
  setTimeout(() => resolve({ response: 'ok' }), 1E3)
})

const fooAction = createAction('FOO', async () => {
  const { response } = await fakeCall()
  return response
})

const foo = () => dispatch =>
  dispatch(fooAction())
    .then(() => dispatch(bar()))

// or

const foo = () => async dispatch => {
  await dispatch(fooAction())
  dispatch(bar())
}
于 2017-01-10T08:40:43.103 回答
0

Aperçu 回答的问题是“等待”是您正在阻止事件循环，您必须直接处理 Promises。

“redux-promise-middleware”还有一个替代方案，redux-auto具有与 redux-promise-middleware 相同的 API，但也带有链接 reducers 调用的机制。

你的例子看起来像：

// UI code
actions.data.foo()

// store/data/foo.js
export function fulfillment(data,payload){
   return data
} fulfillment.chain = actions.x.bar

export function action(payload){
    return Promise.resolve()
}

真的，就是这样。您只需要将操作分配给链属性，redux-auto 将在 redux 生命周期的正确位置调用它

了解上面的源码。redux-auto 自动创建动作并根据文件结构将它们连接到 reduce。其中文件夹名称成为状态属性的名称。文件夹中的文件是要对状态的该部分执行的操作。

这是将操作链接在一起的文档

于 2017-06-24T17:57:17.107 回答