技術標籤：reactjavascriptreactjs

什麼是 redux-thunk

• redux-thunk 是一箇中間件，專門用來解決 action 中的非同步處理。

• redux提供了一個方法 applyMiddleware 用來使用中介軟體。

• redux-thunk 的安裝方法：cnpm i redux-thunk -S

redux-thunk的規則：

• 通常情況下，action必須是一個物件，或者返回一個物件；

  在使用redux-thunk之後，允許action返回一個函式，函式有個引數dispatch

• 在需要進行非同步處理的時候返回函式，函式裡有引數dispatch，根據引數dispatch來拋發你的新action

• redux-thunk的底層原理是根據返回的是不是函式來決定是否給你引數讓你進行操作

redux-thunk的使用：

1. 在 store/index.js 中，使用中介軟體 redux-thunk

   import { createStore,applyMiddleware } from 'redux'
   import reduxThunk from 'redux-thunk'
   import reducers from './reducers'
   
   // 建立 store 的時候，使用中介軟體
   const store = createStore(reducers,applyMiddleware(reduxThunk)
    
   );
   export default store;
   

2. 在需要處理非同步的 非同步action 中，返回一個非同步函式而不是物件

   // 元件中拋發這個外部action，而真正的action是在內部被拋發的
   export const myAsyncAction = ()=>{
       
       // 在非同步action中，定義一個需要拋發的action，引數就是要做非同步處理的資料
       let myAction = (val)=>({
           type:myType,
           value:val
       })
       
       // 返回一個非同步函式，非同步函式有一個dispatch引數
    
   
       // 函式內進行非同步請求，然後將資料賦值給自定義的 action 中，再把自定義的 action 拋發出去
       return async (dispatch)=>{
           let data = await getDataApi();
           dispatch(myAction(data))
       }
   }
   

   至此，action的非同步處理就完成了，接下來的步驟按照正常的redux流程走即可

React 中的中介軟體的概念

react中的中介軟體其實就是 action 與 reducers 之間的一個應用。用來影響雙方互動的值。

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();

沒錯，作為一箇中間件，redux-thunk 的核心原始碼只有這十多行而已

相關文件

• flux的基本使用
• Redux的基本使用
• react-redux外掛的使用