反应 redux，thunk 完成事件过早发生

Posted 2023-02-22

【中文标题】反应 redux，thunk 完成事件过早发生

【英文标题】：react redux, thunk fulfilled event happens prematurely

【发布时间】：2021-03-23 16:56:25

【问题描述】：

我在项目的其他领域使用了类似的 Thunk 和 slice，所有工作都按预期工作，但这个特定的不工作，与这个 Thunk 的不同之处在于它包含一个等待结果的 axios 调用，以便它可以被链接到下一个 axios 调用。

登录后，我认为问题在于 Thunk 在第一次 axios 调用后触发“已完成”，而不是等待完整功能完成，这让我很难解决如何解决此问题。

export const getPlanAPI = createAsyncThunk('dataStorePlans/plan', async () => 
    const response = await axios.get('/api/routes')
    let promises = [];
    const routeData = [];

    // I think the Thunk is firing 'fulfilled' at this point.

    try 
        for (let i = 0; i < response.data.length; i++) 
            promises.push(axios.get('/api/routedetail?planid=' + response.data[i].id + '&jobcount=' + response.data[i].jobs))
        
     catch (error) 
        console.log(error);
    

    Promise.all(promises).then(function (results) 
        results.forEach(function (response) 
            routeData.push(response.data[0]);
        )

        return routeData
    );

);

export const planSlice = createSlice(
    name: 'dataStorePlans/plan',
    initialState: 
        planList: [],
        status: ''
    ,
    reducers: 
        getPlanState: (state) => 
            return state
        
    ,
    extraReducers: 
        [getPlanAPI.pending]: (state, action) => 
            state.status = 'Loading';
        ,
        [getPlanAPI.fulfilled]: (state, action) => 
            state.status = 'Success';
            state.planList = action.payload
        ,
        [getPlanAPI.rejected]: (state, action) => 
            state.status = 'failed';
            action.error = action.error.message;
        
    
);

【问题讨论】：

试试await Promise.all或return Promise.all

很棒的return Promise.all 工作:)

【参考方案1】：

主要问题是您的函数不会等待 Promise 完成。它也从未返回routeData。

您还会因为大量的迭代和推送的东西而使您的函数变得混乱。很容易忘记您必须在哪里退货。我知道async 是新的热门东西，但承诺链在这里效果更好。即使我保留了你的结构，如果你在正确的地方使用map，函数也会变得更容易阅读。

export const getPlanAPI = createAsyncThunk('dataStorePlans/plan', async () => 
    const response = await axios.get('/api/routes')
    let promises = [];

    try 
        promises = response.data.map((id, jobs) =>
            axios.get(`/api/routedetail?planid=$ id &jobcount=$ jobs `)
        )
     catch (error) 
        console.log(error);
    

    return Promise
        .all(promises)
        .then(results =>
            results.map(response => response.data[0])
        )
);