Javascript 行动创造者'；导致错误的异步代码

我正在使用axios在我的action creator中发布帖子。My action creator接收一组对象并将其发布到express服务器

我试图将负载设置为服务器的响应，但我意识到响应发生在创建操作之后

export function sendOrders (data : Order[] ){
 console.log("gets inside sendOrders action creator")
 var output : string;
 axios.post('http://localhost:8081/', data)
 .then(function (response) {
   output = response.data;
   console.log(output)
 })
 .catch(function (error) {
   output = error;
   console.log(output)
 });

 return {
     type: SEND_ORDERS,
     payload : output 
 }
}

结果，我的减速器返回“未定义”。有人知道我如何解决这个问题吗

动作创建者是同步的。也就是说，有一些redux插件，比如

redux-thunk

和

redux-saga

，它们允许动作创建者是异步的，这将允许您在承诺完成后发出动作

使用redux thunk的示例：

export function sendOrders (data : Order[]) { 
  return (dispatch) => {
    var output : string;
    return axios.post('http://localhost:8081/', data)
      .then(function (response) {
        output = response.data;
        console.log(output)

        dispatch({
          type: SEND_ORDERS,
          payload: output 
        });
      })
      .catch(function (error) {
        output = error;
        console.log(output)
      });
  };
}

因此，本质上，动作创建者返回一个承诺返回函数，该函数通过

dispatch

和

getState

传递，因此您可以异步读取状态和分派动作。为了使用这个例子，你必须添加插件。根据文档中的示例：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

动作创建者是同步的。也就是说，有一些redux插件，比如

redux-thunk

和

redux-saga

，它们允许动作创建者是异步的，这将允许您在承诺完成后发出动作

使用redux thunk的示例：

export function sendOrders (data : Order[]) { 
  return (dispatch) => {
    var output : string;
    return axios.post('http://localhost:8081/', data)
      .then(function (response) {
        output = response.data;
        console.log(output)

        dispatch({
          type: SEND_ORDERS,
          payload: output 
        });
      })
      .catch(function (error) {
        output = error;
        console.log(output)
      });
  };
}

因此，本质上，动作创建者返回一个承诺返回函数，该函数通过

dispatch

和

getState

传递，因此您可以异步读取状态和分派动作。为了使用这个例子，你必须添加插件。根据文档中的示例：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);