javascript - 操作创建者的异步代码导致错误

Question

我正在使用 axios 在我的 Action 创建器中发布帖子。我的 Action 创建器接收一系列对象并将其发布到快速服务器。

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

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 
 }
}

结果，我的 reducer 返回“未定义”。有谁知道我该如何解决这个问题？

Answer 1

Action 创建者是同步的。话虽这么说，有一些 redux 插件，例如 redux-thunk 和 redux-saga 允许操作创建者异步，这将允许您在 Promise 之后发出操作完成。

使用 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)
      });
  };
}

因此，本质上，您的操作创建者返回一个 Promise 返回函数，该函数通过 dispatch 和 getState 传递，以便您可以异步读取状态和分派(dispatch)操作。为了使用此示例，您必须添加该插件。来自文档中的示例:

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)
);