Redux 異步操作中間件 Redux-thunk

Redux 異步操作中間件 Redux-thunk

Redux同步修改狀態數據時，Redux要求store.dispatch() 傳遞過來的action是個普通的js對象，這個對象用於描述對數據的操作

但是到了異步的時候，我們需要使用Redux的中間件Redux-thunk，當然中間件有很多。Redux-thunk只是其中的一個。
1.安裝Redux-thunk

npm install --save redux-thunk

2.配置中間件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
 
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

此時Redux要求store.dispatch() 傳遞過來的action是個函數。redux-thunk會判斷傳遞過來的action類型，是否爲函數，若爲函數類型，則自動調用這個function，並返回dispatch，這樣在異步操作的任何時刻都可以dispatch了。

redux-thunk 源碼展示

function createThunkMiddleware(extraArgument) {
	  return function (_ref) {
	    var dispatch = _ref.dispatch,
	        getState = _ref.getState;
	    return function (next) {
	      return function (action) {
	        if (typeof action === 'function') {
	          return action(dispatch, getState, extraArgument);
	        }

	        return next(action);
	      };
	    };
	  };
	}

	var thunk = createThunkMiddleware();
	thunk.withExtraArgument = createThunkMiddleware;

3.如何使用

store.dispatch(
  changeFn()
);

function changFn () {
	return (dispatch,state)=>{
      axios.get('xx').then((res)=>{
            console.log('ajax請求成功了')
            dispatch()   
        }).catch(()=>{
            console.log('error');
        });
    }
}

總結：

redux的狀態更改：

view——>actions——>reducer——>state變化——>view變化（同步）

view——>actions——>redux middleware——>actions——>reducer——>state變化——>view變化 (異步)

redux middleware就是在actions和reducer之間做了一些處理，不讓store.dispatch 後立即到達reducer去修改狀態。
異步的時候action了兩次