Question

我正在尝试使用redux更改我的反应状态。我的其他诉讼案件似乎运作良好，但我仍然坚持。我认为问题的根源是异步功能，但我不确定。我根本无法使用异步函数中的return语句更改状态。我最好的猜测是，return语句仅在与“ if”语句相同的作用域内工作，因此我无法从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()的结果。

一个简单的解决方案

我对解决方案的建议是：

将newItem()方法移出reducer并简单地返回newItem对象
在用户界面中调用newItem()方法，等待它，然后调用将结果分配给ADD_ITEM的操作：

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

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

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

我建议检查一些还原examples。

Redux Item Reducer的异步函数中的return语句未更改状态

1 个答案:

一个简单的解决方案