logger.js
export default store => next => action => {
console.log(action)
next(action)
}
test.js
export default store => next => action => {
console.log('action', action)
next(action)
}
index.js
import { createStore, applyMiddleware } from 'redux'
import reducer from './reducers/conter.reducers'
import logger from '../store/middleware/logger'
import test from '../store/middleware/test'
export const store = createStore(reducer, applyMiddleware(logger, test))
/*
applyMiddleware 是一个redux的API, 用于从左到右链式调用中间件,返回一个函数,
一般使用中间件会用到,接收多个中间件为参数
*/
/*
为什么要使用中间件?
通常我们使用dispatch调用action不仅仅只是更新reducer,可能还需要其他的功能,最后
再更新reducer,那么我们需要开发的其他功能就是中间件。
在调用dispatch的时候,会被中间件接收到,中间件会执行相应的业务,如果有多个中间件
将会调用next方法,将结果传递给下个中间件,直到所有中间件执行完毕,才会将最终的值给到
reducer进行更新
*/
/*
createStore 接收三个参数
第一个参数为reducer
第二个参数为state的初始值
第三个参数为组合store cteator的高阶函数
在这里传递给createStore的applyMiddleware就是store cteator的高阶函数
*/