Как вызвать функцию из действия перед отправкой в ​​редуктор?

Question

Я работаю над приложением React Redux. У меня есть действие, в котором я вызываю служебную функцию перед отправкой действия.

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 устанавливается как undefined . Я пытаюсь пройтись по GetDataFromAPIs. js, но он прослеживает до ax ios .all, а затем выходит из функции. Я не вижу ошибок в консоли.

Итак, я предполагаю, что действие отправляется до разрешения двух топоров ios .all. Я думал, что это будет синхронно (newData вернет данные, а затем будет отправлено действие). Я делаю это неправильно?

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, вы будете нужно установить этот модуль npm и обновить createStore, чтобы он выглядел примерно так:

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

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

Если вы покажете ваш текущий файл createStore, тогда я могу помочь вам больше.

Answer 2

GetDataFromApis не возвращается.

Вы должны сделать

const GetDataFromApis = async () => {
    return axios.all(...

GetDataFromApis также вернет Promise, поэтому вы должны await в updateData вот так:

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

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

Answer 3

Я думаю async / await - это то, что вам нужно.

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

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


const GetDataFromAPIs = async () => {
  try {
    const responses = await 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.");
  })
}