中间件

Middleware 可以让你包装 store 的 dispatch方法来达到你想要的目的。同时， middleware 还拥有“可组合”这一关键特性。多个 middleware 可以被组合到一起使用，形成 middleware 链。其中，每个 middleware 都不需要关心链中它前后的 middleware 的任何信息。
首先Redux常用的中间件的功能有：日志记录、异步调用等功能。中间件是为了拓展程序功能而存在。通常由框架提供实现接口的方案

logger中间件的作用

redux-logger中间件，实现的功能是打印出一个action发出之后，state的更改的过程。一个简单的事例

actions.js

let nextTodoId = 0
export const addTodo = (text) => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
})

reducers.js

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ]
    default:
      return state
  }
}

export default todos

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import {applyMiddleware,createStore} from 'redux';

import logger from 'redux-logger';

import './index.css';
import App from './App';
import * as actions from './actions';
import reducers from './reducers';
import registerServiceWorker from './registerServiceWorker';

const store = createStore(reducers,applyMiddleware(logger));

store.dispatch(actions.addTodo('add ToDo'));


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

以上代码运行结果如下所示：

redux-logger.PNG

从运行结果可以看到，dispatch一个addTodo action后，redux-logger中间件会打印出action运行之前的state ,然后是action的值，最后是action执行之后的 next state的值；下面要讨论的就是这样的一个中间件形成的一个过程。

最原始的实现

如果要提供以上的logger功能，有一个极其简单的方法，即替换掉store.dispatch方法：

import React from 'react';
import ReactDOM from 'react-dom';

import {applyMiddleware,createStore} from 'redux';

// import logger from 'redux-logger';

import './index.css';
import App from './App';
import * as actions from './actions';
import reducers from './reducers';
import registerServiceWorker from './registerServiceWorker';

// const store = createStore(reducers,applyMiddleware(logger));

const store = createStore(reducers);


let dispatch = store.dispatch;
//替换掉store原始的dispatch
store.dispatch = (action) => {
    console.log('prev state',store.getState());
    console.log('dispatch',action);
    let result = dispatch(action);
    console.log('next state',store.getState());

    return result;
}


store.dispatch(actions.addTodo('add ToDo'));


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

这样就可以在发布action之前和之后都打印出state的值了。虽然这只是一个很简单的替换store的dispatch，但是确实实现了这个功能，而这也是redux中间件最核心的四项。其他的都是为了扩展性而围绕着这个核心设计的。