我正在试验 redux 异步操作。我有一个简单的 react 计数器应用程序,带有一个 Action 创建器,用于 ASYNC_INCREMENT
:
export const asyncIncrement = () => ({
type: 'ASYNC_INCREMENT',
payload: api.number.getNumber(),
})
带 reducer :
function counter(state = 0, { type, payload }) {
switch (type) {
case 'INCREMENT':
return state + 1
case 'ASYNC_INCREMENT':
payload
.then(({data}) => data)
.then(({ number }) => {
number + state
})
case 'DECREMENT':
return state - 1
default:
return state
}
}
export default counter
我知道这是完全错误的,但我很有趣,为什么在这种情况下我会启动我的 ASYNC_INCREMENT
操作,我的 state
转换为 state - 1
。例如:是 9,变成 8 等等。
为什么会这样?
最佳答案
这是由于 switch 语句的行为。在 case 'ASYNC_INCREMENT':
中没有return
或 break
,因此代码继续到 case 'DECREMENT':
,它返回 state - 1
如您所知,reducer 必须是同步的,因此在 reducer 中做基于 promise 的事情是不正确的。您需要使用异步中间件来执行异步操作。常见示例包括 Redux-Thunk , Redux-Saga , 和 Redux-Observable . Redux-thunk 是一个 recommended by the redux style guide .
关于javascript - Redux reducer promise 处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59021049/