简述Redux 中间件是怎么拿到store 和 action? 然后怎么处理 ?
Redux 中间件是 Redux 架构中非常重要的一部分,主要用于处理异步操作和副作用。每个 Redux 中间件都可以获取到 store
的 dispatch
和 getState
方法,以及被派发的 action
。中间件可以在 action
到达 reducer 之前拦截它,进行一些额外的操作,例如日志记录、异步请求等。
每个 Redux 中间件都遵循这样的格式:
const middleware = storeAPI => next => action => {
// 中间件的代码
}
这里,storeAPI
是一个对象,包含 dispatch
和 getState
方法;next
是下一个中间件的 dispatch 方法,如果没有下一个中间件,next
就是 store 的 dispatch 方法;action
是被派发的 action。
中间件可以在 action 到达 reducer 之前拦截它,进行一些额外的操作,然后通过调用 next(action)
将 action 传递给下一个中间件或 reducer。如果中间件没有调用 next(action)
,那么 action 就不会传递给下一个中间件或 reducer,这可以用于条件地阻止 action 的传递。
以下是一个简单的 Redux 中间件的例子,记录每个 action 和更新后的状态:
const loggerMiddleware = storeAPI => next => action => {
console.log('dispatching', action);
let result = next(action);
console.log('next state', storeAPI.getState());
return result;
}
在这个例子中,loggerMiddleware
中间件首先打印被派发的 action,然后调用 next(action)
将 action 传递给下一个中间件或 reducer,最后打印更新后的状态。