浅谈redux(二)

Redux中间件与异步操作

Redux的使用方式是用户发出 Action，Reducer 函数算出新的 State，View 重新渲染。但是应该考虑到异步操作怎么执行，Action 发出以后，Reducer 立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。这时就需要使用中间件(middleware)进行异步操作。

中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。

1.中间件的使用

• applyMiddlewares()

  首先你需要知道applyMiddlewares()方法，它是 Redux 的原生方法，作用是将所有中间件组成一个数组

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(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);

    return {...store, dispatch}
  }
}

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

• Redux-thunk中间件

Redux-thunk是解决异步操作的插件，安装Redux-thunk后。看看怎样使用它

import { createStore,applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'

let store = createStore(reducer,applyMiddleware(thunk))

export default store

在action中进行异步操作

import { cartList,del,putCart } from '../../api/request'
export default {
    getList(){
        return dispatch => {
            cartList().then(res => {
                dispatch({
                    type:"CART",
                    list:res
                })
            })
        }
    }
  }

以上就是redux进行异步操作的过程。详细说明请阅读:中间件与异步操作