无法在actions/api服务中访问Redux store（不使用connect()函数）

我之前也碰到过完全一样的问题！在actions或者api服务这类组件外的代码里拿不到store确实挺闹心的，给你几个亲测有效的方案，帮你搞定获取token的需求：

方案1：导出Store实例并直接导入使用 #

这是最直接的办法，只要在创建store的时候把它导出，在需要的文件里导入就能调用store.getState()了。

步骤： #

1. 在你的store创建文件（比如store/index.js）里，创建并导出store实例：

import { createStore } from 'redux';
import rootReducer from './reducers';

// 创建store并导出
export const store = createStore(rootReducer);

2. 在api.js或者actions文件里导入这个store，直接获取token：

import { store } from './store';

export const fetchProtectedData = async () => {
  // 从store的auth reducer里拿token
  const token = store.getState().auth.token;
  
  return fetch('/api/protected', {
    headers: {
      'Authorization': `Bearer ${token}`
    }
  }).then(res => res.json());
};

⚠️ 注意：要避免循环导入的问题，比如不要在reducer文件里导入store，不然会导致store还没初始化就被引用，出现undefined的情况。

方案2：结合请求拦截器自动注入Token（推荐） #

如果你的项目用了axios这类请求库，建议用拦截器来自动给请求加token，一劳永逸。

同样先导出store，然后在api封装文件里配置拦截器：

import axios from 'axios';
import { store } from './store';

// 创建axios实例
const apiClient = axios.create({
  baseURL: '/api'
});

// 请求拦截器：自动给所有请求加上token
apiClient.interceptors.request.use(config => {
  const token = store.getState().auth.token;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default apiClient;

之后所有用apiClient发起的请求都会自动带上token，不用每次手动获取。

方案3：用Redux Thunk在Action Creator里获取State（最佳实践） #

如果你的项目用了redux-thunk中间件（Redux Toolkit默认集成），action creator可以写成函数，它的第二个参数就是getState，能直接获取当前store状态，不用导入store实例。

示例：

import apiClient from './api';

export const fetchUserProfile = () => (dispatch, getState) => {
  // 直接通过getState获取token
  const token = getState().auth.token;
  
  return apiClient.get('/user/profile', {
    headers: { Authorization: `Bearer ${token}` }
  })
  .then(res => {
    dispatch({ type: 'FETCH_PROFILE_SUCCESS', payload: res.data });
  })
  .catch(err => {
    dispatch({ type: 'FETCH_PROFILE_FAILED', payload: err.message });
  });
};

这种方式更符合Redux的设计理念，避免了对store实例的直接依赖，也不会有循环导入的风险。

为什么你的示例里Store是undefined？ #

大概率是导入顺序问题：比如你在store还没创建完成的时候就导入了它，或者出现了循环导入（比如actions导入store，store导入reducers，reducers又导入actions），导致store还没初始化就被引用，所以输出undefined。调整导入顺序，确保store在被导入前已经创建完成就能解决。

内容的提问来源于stack exchange，提问作者SinSync