Redux 中间件是怎么拿到store 和 action? 然后怎么处理?
Redux 中间件的设计是基于高阶函数和链式调用的概念。中间件的基本形式是一个函数,这个函数返回另一个函数,这个返回的函数再返回一个函数,这样形成了一个闭包。
这里先看一下标准的Redux中间件的基本形式:
const middleware = store => next => action => {
// 在这里处理你的代码
}
store
:Redux的store实例,你可以调用store.getState()获取当前的state,或者store.dispatch()派发一个新的action。-
next
:这是一个函数,你可以调用next(action)来把控制权交给下一个中间件,如果没有下一个中间件,那么控制权就交给Redux。 -
action
:这是当前派发的action。
中间件的处理流程通常是这样的:
- 中间件拿到当前的
action
和store
。 - 根据需要,中间件可以在
action
被传递到reducer之前,修改action
,拦截action
,或者在action
被处理后做一些额外的操作。 - 中间件处理完后,通过
next(action)
将action
传递给下一个中间件,如果没有下一个中间件,那么action
将被传递给reducer。
例如,一个简单的中间件,用于在console里记录每个action和state的变化:
const logger = store => next => action => {
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}
在这个例子中,每当一个action被派发,我们都会在console里记录这个action,然后调用next(action)
将action传递给下一个中间件或者reducer,然后再记录新的state。