javascript - 在调度到reducer之前如何从action调用函数？

Question

我正在开发一个 React Redux 应用程序。我有一个 Action ，我在调度 Action 之前调用了一个实用函数。

import GetDataFromAPIs from "../utils/menu-creator";
export const UPDATE_DATA = 'UPDATE_DATA';

export const updateData = () => {
    const newData = GetDataFromAPIs();

    return{
        type: UPDATE_DATA, 
        payload: newData
    };
};

而且，这就是 GetDataFromAPIs.js 正在做的事情:

import React from "react";
import axios from "axios";

const apiOneData = axios.get('/api/a');
const apiTwoData = axios.get('/api/b');


const GetDataFromAPIs = () => {
    axios.all([apiOneData, apiTwoData]).then(axios.spread((...responses) => {
        var firstDataSet = responses[0].data
        var secondDataSet = responses[1].data;
        var dataObject = [];

        dataObject.push(firstDataSet);
        dataObject.push(secondDataSet);

        return dataObject;

    })).catch(errors => {
        console.log("There was an error.");
    })
}

export default GetDataFromAPIs;

但是当应用程序运行时 新数据 设置为 未定义 .我正在尝试逐步执行 GetDataFromAPIs.js，但它会一直跟踪到 axios.all，然后退出该函数。我在控制台中看不到任何错误。

所以我猜是在两个 axios.all 解决之前调度了 Action 。我认为这将是同步的(newData 将取回数据，然后将分派(dispatch)操作)。我做错了吗？

Answer 1

您需要将操作明确告知 wait异步获取该数据。为此，请进行以下更改:

您的 GetDataFromAPIs函数应该是这样的:

const GetDataFromAPIs = async () => {
    // everything in here stays the same
}

还有你的 updateData函数应如下所示:

export const updateData = async (dispatch) => {
    const newData = await GetDataFromAPIs();

    return dispatch({
        type: UPDATE_DATA, 
        payload: newData
    });
};

一定要 dispatch你的行动。
注:
如果你还没有 redux-thunk setup 然后你需要安装 npm模块并更新您的 createStore看起来像这样:

// other imports
import { applyMiddleware, createStore } from 'redux'
import thunk from 'redux-thunk'

const store = createStore(rootReducer, applyMiddleWare(thunk))