Reduxのミドルウェア - アクションプロパティにフック

Question

私はReduxの約束ミドルウェアを使用して_FULFILLEDと_rejectedというは自動的に追加されているように、この

export const getProject =() => ({ 
    type: "GET_PROJECT", 
    payload: axios.get(process.env.SERVICE_URL + '/project/') 
}) 

ように私の行動のクリエイターを書いています。これは正常に動作します。 Reduxの約束ミドルウェアを使用する前に、私は、この方法を、アクション自体の内部ディスパッチを使って自分の行動に近づいた：

export function fetchTypes(){ 
return function(dispatch) { 
    axios.get(process.env.SERVICE_URL + "/kinds/", { 
     headers: { 
     'Authorization': 'JWT ' + sessionStorage.jwt 
     } 
    }) 
    .then((response) => { 
     dispatch({ type: "FETCH_TYPES_FULFILLED", payload: response.data }) 
    }) 
    .catch((err) => { 
     dispatch({ type: "FETCH_TYPES_REJECTED", payload: err }) 
    }) 
    } 
} 

はるかに冗長で繰り返し。このアプローチの問題は、作成したすべてのアクションにヘッダーを追加する必要があることです。私が今しようとしているのは、ミドルウェアを作成してペイロードを更新し、JWTトークンをAPIリクエストに添付して、すべてのアクション作成者でトークンの有効期限をチェックする必要がないようにすることです。それは実現可能ですか？私はブログやミドルウェアについての記事を読んだが、next（アクション）を呼び出す前にリクエストにフックしてプロパティを追加する方法を見つけることができない。 または、私は単に問題を間違った方法で近づけていますか？

Answer 1

例えば、api.jsという別のファイルを作成することができます。ここではfetchKindsなどのAPI関数について説明します。あなたのアクション関数はAPIロジックを含んではいけません。正しいアクションをディスパッチするためのものです。

// api.js 
class Api { 
    _checkTokenExpiration() { 
    // Throw error if expired 
    } 

    _getAuthHeaders() { 
    this._checkTokenExpiration() 
    return { 
     'Authorization': 'JWT ' + sessionStorage.jwt 
    } 
    } 

    fetchKinds() { 
    return axios.get(process.env.SERVICE_URL + "/kinds/", { 
     headers: this._getAuthHeaders() 
    }) 
    .catch(err => { 
     throw err 
    }) 
    } 
} 

export default new Api() 



// actions 
import api from './path/to/api.js' 

export function fetchTypes(){ 
    return function(dispatch) { 
    api.fetchKinds() 
     .then((response) => { 
     dispatch({ type: "FETCH_TYPES_FULFILLED", payload: response.data }) 
     }) 
     .catch((err) => { 
     dispatch({ type: "FETCH_TYPES_REJECTED", payload: err }) 
     }) 
    } 
}