redux项reducer的异步函数中的Return语句不改变状态

Question

我正在尝试使用redux来更改我的反应状态。我的其他行动案例似乎很有效，但我被这一个卡住了。我认为问题的根源是异步功能，但我不确定。我根本无法用异步函数中的return语句来更改状态。我的最佳猜测是return语句只在与"；如果"；语句，因此我无法从async函数内部返回以更改状态。如果这就是原因，我如何从异步函数中获取一个值，并将其在状态中向上移动一级以返回它？如果问题与范围无关，那么我也会洗耳恭听。

itemReducer.js:

case ADD_ITEM:
if (action.payload.match(/soundcloud.com/) == "soundcloud.com") {
// First async await
async function newItem() {
console.log("0")
const response = await fetch("https://soundcloud.com/oembed?format=json&url=" + action.payload );
const json = await response.json();
let html = json.html.match(/(?<=url=).{53}/).toString()
let newItem = {
id: uuidv4(),
url: html,
name: json.title,
isOpen: false
}
console.log(newItem, ...state.items)
return {
items: [...state.items, newItem]
}
}
newItem();

}

Answer 1

当前的方法存在几个问题。

第一个是，你不应该使用你的减速器来获得更多的状态，这不是它的责任。还原器的职责很简单，还原，或者换句话说，导出一个新状态。它实际上是一个状态机，它接收一个操作，一组属性，并决定下一个状态应该如何。如果你有一个异步操作，你就是在把它和操作混合在一起。

Action ---> Reducer ---> Store

第二个问题似乎是，即使您试图使整个reducer异步，也没有返回newItem()的结果。

一个简单的解决方案

作为解决方案，我的建议是：

1. 将newItem()方法移出reducer并简单地返回newItem对象
2. 在UI中调用newItem()方法，等待它，然后调用调度ADD_ITEM的操作，结果如下：

const item = await newItem();
dispatch({type: ADD_ITEM, item})

3. 接收所需的操作数据并使用它来减少新状态

your_reducer: (state = [], action) => {
case ADD_ITEM:
return [...state, action.item]
}

我建议查看一些redux示例。