揭秘 Redux 中间件：如何获取 store 和 action 及处理方式

Redux 中间件是一个可选的插件，它允许你运行代码在 store 中的 dispatch 之后，以及新的状态被应用之前。中间件在 store 中触发的任何异步操作之前和之后都会被调用。在 Redux 中，store 是全局唯一的一个，可以通过 `store.getState()` 和 `store.dispatch(action)` 来获取和修改状态，而 action 是一个简单的 JavaScript 对象，它描述了要发生的操作。 中间件的处理方式通常是这样的： 1. 中间件函数接收到两个参数：`next` 和 `action`。`next` 是一个函数，它会将 action 传递给下一个中间件，如果没有更多的中间件，它会将 action 传递给 reducer。 2. 中间件函数可以修改 `action`，然后将它传递给 `next`。例如，你可以添加一些元数据到 action，或者你可以在 action 中添加一个额外的属性，表示它正在被哪个中间件处理。 3. 中间件函数也可以在异步操作完成后，调用 `next`。这样，下一个中间件就可以继续处理 action，而不会因为上一个中间件正在进行异步操作而阻塞。 中间件通常用于处理副作用，例如：网络请求、状态订阅、状态更新、错误处理等。中间件可以在 store 中触发的任何异步操作之前和之后都会被调用，这样你就可以在操作被应用到 store 之前和之后执行一些代码。 例如，一个简单的中间件函数可能如下所示： ```javascript function loggerMiddleware() { return store => next => action => { console.log('Action being dispatched:', action) let result = next(action) console.log('Action was dispatched:', action) return result } } ``` 在这个中间件函数中，我们首先打印出要被分发的动作，然后调用 `next(action)` 来分发动作，最后再打印出动作已经被分发了。这样，我们就可以看到每个动作被分发的全过程。 ######[AI写代码神器 | 422点数解答 | 2023-11-09 01:37:55]