Redux 中间件 - 挂钩到动作属性答案

【问题标题】：Redux middleware - Hook into action propertiesRedux 中间件 - 挂钩到动作属性
【发布时间】：2018-01-19 07:21:11
【问题描述】：

我正在使用 Redux Promise 中间件并像这样编写我的动作创建者

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

以便自动附加 _FULFILLED 和 _REJECTED。这工作正常。在使用 Redux Promise Middleware 之前，我在操作本身内部使用 dispatch 来处理我的操作，这样：

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(action) 之前无法找到一种方法来挂钩请求并添加属性。还是我只是以错误的方式解决问题？

【问题讨论】：

标签： reactjs redux

【解决方案1】：

例如，您可以创建名为api.js 的单独文件。在那里您描述了您的 API 函数，例如 fetchKinds 等。您的操作函数不应包含 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 })
      })
  }
}

【讨论】：