React Redux - 动作必须是普通对象。使用自定义中间件进行异步操作
Posted
技术标签:
【中文标题】React Redux - 动作必须是普通对象。使用自定义中间件进行异步操作【英文标题】:React Redux - Actions must be plain objects. Use custom middleware for async actions 【发布时间】:2018-01-31 05:17:35 【问题描述】:我尝试在我的学习 react,redux 项目中使用 axom 处理 ajax 数据,但我不知道如何调度一个动作并在组件内设置状态
在组件中会挂载
componentWillMount()
this.props.actions.addPerson();
商店
import createStore, applyMiddleware from "redux";
import rootReducer from "../reducers";
import thunk from "redux-thunk";
export default function configureStore()
return createStore(rootReducer, applyMiddleware(thunk));
在行动:
import * as types from "./action-types";
import axios from "axios";
export const addPerson = person =>
var response = [];
axios
.get(`&&&&&&&&&&&`)
.then(res =>
response = res.data;
return
type: types.ADD_PERSON,
response
;
);
;
在减速器中
import * as types from "../actions/action-types";
export default (state = [], action) =>
console.log("action======>", action);
switch (action.type)
case types.ADD_PERSON:
console.log("here in action", action);
return [...state, action.person];
default:
return state;
;
我得到的 Actions 必须是普通对象。使用自定义中间件进行异步操作。
【问题讨论】:
【参考方案1】:您应该为异步功能使用调度。看看 redux-thunk 的文档:https://github.com/gaearon/redux-thunk
在行动:
import * as types from "./action-types";
import axios from "axios";
export const startAddPerson = person =>
return (dispatch) =>
return axios
.get(`https://599be4213a19ba0011949c7b.mockapi.io/cart/Cart`)
.then(res =>
dispatch(addPersons(res.data));
);
;
export const addPersons = personList =>
return
type: types.ADD_PERSON,
personList
;
在 PersonComponent 中:
class Person extends Component
constructor(props)
super(props);
componentWillMount()
this.props.dispatch(startAddPerson())
render()
return (
<div>
<h1>Person List</h1>
</div>
);
export default Redux.connect()(Person);
【讨论】:
【参考方案2】:您需要在这里执行两个操作:postPerson
和 addPerson
。
postPerson
将执行 API 请求,addPerson
将更新存储:
const addPerson = person =>
return
type: types.ADD_PERSON,
person,
const postPerson = () =>
return (dispatch, getState) =>
return axios.get(`http://599be4213a19ba0011949c7b.mockapi.io/cart/Cart`)
.then(res => dispatch(addPerson(res.data)))
在您的组件中,调用postPerson()
【讨论】:
【参考方案3】:您使用 redux-thunk 库,它可以让您访问“getState”和“dispatch”方法。我看到晨曦已经在你的问题中添加了这一点。首先在您的操作中运行您的异步操作,然后使用您的简单操作操作创建器调用“dispatch”,这将返回 redux 正在寻找的简单对象。
这是您的异步动作创建者和简单动作创建者(分为两个动作创建者)的样子:
export const addPersonAsync = (person) =>
return (dispatch) =>
var response = [];
axios
.get(`http://599be4213a19ba0011949c7b.mockapi.io/cart/Cart`)
.then(res =>
response = res.data;
dispatch(addPerson(response));
);
;
;
export const addPerson = (response) => (
type: types.ADD_PERSON,
response
);
现在,您将在您的组件中调用“addPersonAsync”操作创建者。
【讨论】:
以上是关于React Redux - 动作必须是普通对象。使用自定义中间件进行异步操作的主要内容,如果未能解决你的问题,请参考以下文章
如何修复'动作必须是普通对象。使用自定义中间件进行异步操作。
动作必须是普通对象。将自定义中间件用于测试库而不是应用程序上的异步操作
Redux thunk - 错误 · 动作必须是普通对象。使用自定义中间件进行异步操作,即使调度具有键类型的对象