我正在试验 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/