javascript - 如何在分派(dispatch)到 reducer 之前从操作中调用函数？

Question

我正在开发一个 React Redux 应用程序。我有一个操作，在分派(dispatch)操作之前我会调用实用程序函数。

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;

但是当应用程序运行时，newData 被设置为未定义。我试图单步执行 GetDataFromAPIs.js，但它一直跟踪到 axios.all，然后退出该函数。我在控制台中没有看到任何错误。

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

Answer 1

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

---

您的 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
    });
};

请务必调度您的操作。

注意:

如果您还没有 redux-thunk 设置，那么您需要安装 npm 模块并更新您的 createStore 以查看像这样的东西:

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

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