链接还原-操作和还原-承诺-中间件

Question

我使用redux-行动和redux-承诺-中间件来分派操作，以及用于async await支持的TypeScript 2.1。

这是一个同时使用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看起来是同步的，它也会在幕后使用承诺，而且不管您是否使用await，async函数总是会返回承诺。

由于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

艾普苏回答的问题是，“等待”是你阻塞了事件循环，你必须直接处理承诺。

还有一种替代“redux-允诺-中间件”的方法，即剩馀汽车具有与redux承诺中间件相同的API，但也提供了一种链接减少器调用的机制。

您的例子应该类似于：

// 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-自动创建操作并根据文件结构将它们连接到减缩。其中文件夹名成为状态上的属性的名称。文件夹中的文件是要在状态的该部分上执行的操作。

这是文档把行动联系在一起