Redux 中间件

[toc]

Redux 中间件的作用

Reudx 中的中间件是通过对 dispatch 进行的二次封装，对 action 发起之后，reducer 调用之前的行为进行扩展，我们可以通过中间件来进行：日志记录、发送报告、调用异步接口 ……

从日志记录需求开始

需求：再每次 dispatch 的时候打印修改之前和之后的 state

准备

let initState = {
  users: []
}

function reducers(state=initState, {type, payload}) {
  switch(type) {
    case 'user/add':
      return Object.assign(state, {
        users: [...state.users, payload]
      });
  }

  return state;
}

let store = Redux.createStore(
  reducers
);

最直接最原始的做法

console.log(store.getState());
store.dispatch({
  type: 'user/add',
  payload: 'zmouse'
});
console.log(store.getState());

封装 logger

function logger(store, action) {
  console.log(store.getState());
  store.dispatch(action)
  console.log(store.getState());
}

logger(store, {
  type: 'user/add',
  payload: 'zmouse'
});

封装 dispatch

let next = store.dispatch;
store.dispatch = function logger(action) {
  console.log(store.getState());
  next(action);
  console.log(store.getState());
}

store.dispatch({
  type: 'user/add',
  payload: 'zmouse'
});

添加错误报告发送

需求：每次 dispatch 把提交的数据进行持久化

let next = store.dispatch;
store.dispatch = function storage(action) {
  next(action);
  let s = localStorage
}

store.dispatch({
  type: 'user/add',
  payload: 'zmouse'
});

封装合并多个中间件

• 把每个独立的中间件封装成独立的函数
• 每个中间件都需要获取一次 dispatch

function logger(store) {
  let next = store.dispatch;
  return function loggerDispatch(action) {
    console.log('before: ', store.getState());
    next(action);
    console.log('after: ', store.getState());
  }
}

function storage(store) {
  let next = store.dispatch;
  return function storageDispatch(action) {
    next(action);
    localStorage.setItem('store', JSON.stringify(store.getState()));
    console.log('持久存储完成');
  }
}

store.dispatch = logger(store);
store.dispatch = storage(store);

store.dispatch({
  type: 'user/add',
  payload: 'zmouse'
});

方法一个方法统一处理中间件函数的注册

封装一个 applyMiddleware 方法

function applyMiddleware(store, middlewares) {
  middlewares.reverse()
  middlewares.forEach(middleware => {
    store.dispatch = middleware(store)
  })
}

applyMiddleware(store, [logger, storage])

抽取 next

function applyMiddleware(store, middlewares) {
  middlewares.reverse()
  let dispatch = store.dispatch
  middlewares.forEach(middleware => {
    dispatch = middleware(store)(dispatch)
  })
  store.dispatch = dispatch;
}

function logger(store) {
  return function(next) {
    return function loggerDispatch(action) {
      console.log('before: ', store.getState());
      next(action);
      console.log('after: ', store.getState());
    }
  }
}

function storage(store) {
  return function(next) {
    return function storageDispatch(action) {
      next(action);
      localStorage.setItem('store', JSON.stringify(store.getState()));
      console.log('持久存储');
    }
  }
}

ES6 改写

let logger = store => next => action => {
  console.log('before: ', store.getState());
  next(action);
  console.log('after: ', store.getState());
}
let storage = store => next => action => {
  next(action);
  localStorage.setItem('store', JSON.stringify(store.getState()));
  console.log('持久存储');
}

使用 Redux.applyMiddleware 方法

Redux 内置了一个 applyMiddleware 方法用来注册中间件

let store = Redux.createStore(
  reducers,
  Redux.applyMiddleware(logger, storage)
);

异步的问题

仔细观察我们发现，默认的 dispatch 是没有对异步的任务进行处理的，且该方法默认情况下接收的是一个 action 对象

redux-thunk 的原理

通过中间件重新封装 dispatch 方法，使它能够接收一个异步任务函数

let thunk = store => next => action => {
  console.log('thunk');
  new Promise( (resolve, reject) => {
    action(next);
  } )
}

store.dispatch( dispatch => {
  setTimeout(() => {
    dispatch({
      type: 'user/add',
      payload: 'zmouse'
    });
  }, 1000);
} )