1、为什么需要中间件
默认情况下,redux只能处理同步数据流。但是实际项目开发中,状态的更新、获取、通常是使用异步操作来实现的。
2、redux中间件的作用:处理具有副作用的功能,比如,异步操作就是常见的side effect
3、中间件的理解:
中间件,可以理解为处理一个功能的中间环节。
Redux中间件用来处理状态更新,也就是在状态更新的过程中,执行一系列操作。
一、redux-logger中间件(如果使用了中间件,logger应该放在最后)
1、安装yarn add redux-logger
2、导入redux-logger中间件
3、从redux中导入applyMiddleware函数
4、调用applyMiddleware()并传入logger中间件作为参数
5、将applyMiddleware()调用作为createStore函数的第二个参数
import { createStore,applyMiddleware } from "redux";
import logger from 'redux-logger'
import reducer from './reducers'
const store=createStore(reducer,applyMiddleware(logger))
export default store
二、redux-thunk中间件
1、用来可以处理函数形式的action。因此,在函数形式的action就可以执行异步操作。
2、thunk action是一个函数。函数包含两个参数dispatch getState
const thunkAction=()=>{
return (dispatch,getState)=>{
setTimeout(() => {
// 执行异步操作
}, 500);
}
}
使用
1、yarn add redux-thunk
2、导入redux-thunk
3、将thunk添加到applyMiddleware函数的参数中
4、创建函数形式的action,在函数中执行异步操作
import { createStore,applyMiddleware } from "redux";
import logger from 'redux-logger'
import thunk from "redux-thunk";
import reducer from './reducers'
const store=createStore(reducer,applyMiddleware(thunk,logger))
export default store
export const addTodo=(name)=>{
return (dispatch)=>{
setTimeout(() => {
dispatch({type:types.ADD_TODO,payload:{
id:Date.now(),
name,
done:false
}})
}, 500);
}
}
三、redux-devtools-extension中间件(有这个就可以不用loggle了)
目标:使用chrome开发者工具调试跟踪redux状态
步骤:
1、yarn add redux-devtools-extension
2、从该中间件中导入composeWithDevTools函数
3、调试该函数,将applyMiddleware作为参数传入
4、打开Chrome浏览器的redux开发者工具并使用
import { createStore,applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import logger from 'redux-logger'
import thunk from "redux-thunk";
import reducer from './reducers'
const store=createStore(reducer,composeWithDevTools(applyMiddleware(thunk,logger)))
export default store