我正在使用 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 返回“未定义”。有谁知道我该如何解决这个问题?
最佳答案
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)
);
关于javascript - 操作创建者的异步代码导致错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48067503/