Question

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

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

以便自动附加_FULFILLED和_REJECTED。这很好用。在使用Redux Promise Middleware之前，我正在使用动作本身内部的调度来接近我的行为，这样：

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）之前找不到挂钩请求并添加属性的方法。或者我可能只是以错误的方式解决问题？

Answer 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 })
      })
  }
}

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

1 个答案: