八、异步action编码时报错：Error: Actions must be plain objects. Use custom middleware for async actions.

最新推荐文章于 2023-09-15 11:24:12 发布

原创最新推荐文章于 2023-09-15 11:24:12 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Redux中同步action和异步action的概念。同步action用于直接操作状态，而异步action用于处理需要等待数据的任务。当需要在获取异步数据后更新状态时，使用异步action。在编码时，若遇到Error: Actions must be plain objects. Use custom middleware for async actions.的错误，需要引入redux-thunk中间件来支持异步action。通过在action.js中定义返回函数的异步action，并在组件中调用store.dispatch()，可以实现异步任务的处理。

一、什么是同步action？什么是异步action？

同步action，就是指action的值为Object类型的一般对象
异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
那么什么时候使用异步action呢？
想要对状态进行操作，但是具体的数据靠异步任务返回
异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action

二、异步action的具体编码

编码时报错：Error: Actions must be plain objects. Use custom middleware for async actions.
这里需要利用中间件进行处理
解决方法：

npm install redux-thunk
在store.js中进行配置：

import {createStore,applyMiddleware} from 'redux'
import reducer from './reducer'
import thunk from 'redux-thunk'
//暴露store
export default createStore(reducer,applyMiddleware(thunk))
//其中applyMiddleware需要作为createStore函数的第二个参数传入，thunk则作为applyMiddleware的参数传入

action.js

export const createAction = data => ({type:'increment',data})
export const createAsyncAction = (data,time) => {
	return (dispatch)=>{
		setTimeout(()=>{
			dispatch(createAction(data))
		},time)
	}
}

创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务
异步任务有结果后，分发一个同步的action去真正操作数据
组件中的调用：

store.dispatch(createAsyncAction(value,500))

此时延迟的动作不再交给组件自身，而是交给action