# Middleware And Asynchronous

## 中间件与异步操作

* Reducer：纯函数，只承担计算 State 的功能，不合适承担其他功能，也承担不了，因为理论上，纯函数不能进行读写操作。
* View：与 State 一一对应，可以看作 State 的视觉层，也不合适承担其他功能。
* Action：存放数据的对象，即消息的载体，只能被别人操作，自己不能进行任何操作。

### 中间件的用法

```
import { applyMiddlerware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = creteLogger();

const store = createStore(
  reducer, applyMiddleware(logger)
);
```

注意：

1. createStore 方法可以接受整个应用的初始状态作为参数，那样的话， applyMiddleware 就是第三个参数了。
2. 中间件的次序有讲究。

### applyMiddlewares()

```
export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer);
    var dispatch = store.dispatch;
    var chain = [];

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    };

    chain = middlewares.map(middleware => middleware(middlerwareAPI));
    dispatch = compose(...chain)(store.dispatch);

    return { ...store, dispatch }
  }
}
```

所有中间件被放进了一个数组chain，然后嵌套执行，最后执行store.dispatch。可以看到，中间件内部（middlewareAPI）可以拿到getState和dispatch这两个方法。

### 异步操作的基本思路

1. redux-thunk
2. redux-promise


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://raozhanping.gitbook.io/notes/node/node-redux/node-redux-middleware.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.