reactjs - 如何访问组件外部的 redux 存储？

Question

我有一个 API 文件和一个tokenin redux 商店。我已经尝试过，getState()但令牌会在用户登录后存储，所以它给了我未定义的错误。我该如何解决这个问题？

const token = store.getState().verification.token;

import axios from "axios";

const ApiInstance = axios.create({

});

// console.log(process.env);


ApiInstance.defaults.headers.post["content-type"] = "application/json";
ApiInstance.defaults.headers.get["Accept"] = "application/json";
ApiInstance.defaults.headers.get["Authorization"] =
  `Bearer ${token}`;

export default ApiInstance;

Answer 1

使用 Axios 拦截器！:)

无论如何，您不应该.defaults在大多数情况下使用授权，因为理想情况下您的令牌将在一段时间后过期。更好的方法是使用 axios 拦截器。

基本上 axios 允许您定义一个函数，该函数将在每次发出 HTTP 请求时运行。在该函数中，您可以调用store.getState()然后将令牌附加到请求标头中。

例如，您可以使用以下内容：

ApiInstance.interceptors.request.use(req => {
  let myToken = store.getState().verification.token;
  req.headers.authorization = `Bearer ${myToken}`;
  return req;
});