链接 redux-actions 和 redux-promise-middleware

Question

我使用 redux-actions and redux-promise-middleware 来调度动作，同时使用 TypeScript 2.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()));
}

redux-promise-middleware 中的链接如何与 redux-actions 一起使用？

Answer 1

你必须记住，即使 async await 看起来是同步的，它在幕后使用 Promise，并且 async 函数总是 return 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())
}

Answer 2

Aperçu 答案的问题是 "await" 是您阻塞了事件循环，您必须直接处理 Promises。

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

您的示例如下所示：

// 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 生命周期的正确位置调用它

To understand the above source. redux-auto automatically create actions and wires them to reduces based on the file structure. Where the folder name becomes the name of the property on the state. The files within a folder are actions to be performed on that part of the state.

这是文档chaining action together

链接 redux-actions 和 redux-promise-middleware

chaining redux-actions and redux-promise-middleware

typescript

redux

redux-promise