首页 文章

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

提问于
浏览 次
0

我正在使用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 })
    })
  }
}

更冗长，更重复 . 这种方法的问题是我必须在我创建的每个动作上附加 Headers . 我现在要做的是编写一个中间件来更新有效负载并将JWT令牌附加到API请求，这样我就不必在每个操作创建器中执行它，并检查令牌到期 . 这可行吗？我已经阅读过关于中间件的博客和帖子，但是在调用next（action）之前找不到挂钩请求并添加属性的方法 . 或者我可能只是以错误的方式处理问题？

reactjs redux

1 回答

  • 0

    例如，您可以创建名为 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 })
      })
  }
}
    回复于

相关问题