简述Redux 中间件是怎么拿到store 和 action? 然后怎么处理 ?

Redux 中间件是 Redux 架构中非常重要的一部分,主要用于处理异步操作和副作用。每个 Redux 中间件都可以获取到 storedispatchgetState 方法,以及被派发的 action。中间件可以在 action 到达 reducer 之前拦截它,进行一些额外的操作,例如日志记录、异步请求等。

每个 Redux 中间件都遵循这样的格式:

const middleware = storeAPI => next => action => {
  // 中间件的代码
}

这里,storeAPI 是一个对象,包含 dispatchgetState 方法;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,最后打印更新后的状态。

发表评论

后才能评论