如何在函数组件或类组件外部访问Redux state，在utils中获取已持久化的auth值

你可以通过以下两种方式在非组件场景下获取auth状态：

方案1：导出store实例直接调用（推荐） #

这是最常用的方式，获取到的是实时的最新状态，不需要额外处理持久化逻辑。

步骤1：在store配置文件导出store实例 #

你需要在完成redux-persist配置的文件中，将创建好的store实例对外导出：

// 完整store配置示例（通常是store/index.js）
import { createStore, combineReducers } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { authReducer } from './authReducer';

const rootReducer = combineReducers({
  auth: authReducer
});

const persistConfig = {
  key: 'primary',
  storage,
  whitelist: ['auth']
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

// 导出store实例
export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

步骤2：在工具文件中引入store调用getState() #

// 示例：utils/request.js
import { store } from '../store';

// 封装获取auth的方法
const getAuth = () => {
  const fullState = store.getState();
  return fullState.auth || { user: {} };
}

// 业务场景使用：给请求头加token
export const request = async (options) => {
  const { user } = getAuth();
  if (user.token) {
    options.headers = {
      ...options.headers,
      Authorization: `Bearer ${user.token}`
    }
  }
  // 后续请求逻辑
}

方案2：直接读取本地持久化存储 #

如果你不想引入store实例，可以直接读取redux-persist写入本地的存储数据，适合对状态实时性要求不高的场景。
你配置的persist key为primary，默认存储在localStorage中，对应的存储key为persist:primary：

// 工具文件中直接读取本地存储
export const getPersistedAuth = () => {
  try {
    const persistStr = localStorage.getItem('persist:primary');
    if (!persistStr) return { user: {} };
    const persistData = JSON.parse(persistStr);
    // redux-persist会单独序列化每个reducer，需要二次解析
    const authData = JSON.parse(persistData.auth);
    return authData;
  } catch (err) {
    // 解析失败返回默认值
    return { user: {} };
  }
}

注意：如果你的存储介质不是localStorage（比如sessionStorage、React Native的AsyncStorage），替换对应的读取API即可。

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