如何在非React组件的服务中访问React Redux Store中的值？

嗨，我明白你的需求——把认证逻辑抽离到非React组件的工具类里，同时要获取Redux中存储的user_token对吧？这里有两种实用的方案，你可以根据项目情况选择：

这是最直接的方式，只要你在创建store的地方把它导出，就能在工具函数里直接访问状态。

首先，确保你的store文件（比如src/store/index.js）导出了store实例：

// src/store/index.js
import { createStore, combineReducers } from 'redux';
import authReducer from './reducers/auth';

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

// 导出store，供外部使用
export const store = createStore(rootReducer);

然后在你的工具函数文件里导入这个store，调用getState()就能拿到token了：

// src/utils/authService.js
import { store } from '../store';

export const fetchProtectedResource = async () => {
  // 从store中获取token
  const userToken = store.getState().auth.user_token;
  
  if (!userToken) {
    throw new Error('用户未登录，请先登录');
  }

  // 这里写你的认证相关逻辑，比如带token请求接口
  const response = await fetch('https://your-api-endpoint.com/protected', {
    headers: {
      Authorization: `Bearer ${userToken}`
    }
  });

  return response.json();
};

注意事项：

• 要保证store在工具函数导入前已经完成初始化，不然会出现getState()获取不到状态的问题
• 这种方式会让工具函数和Redux store产生耦合，如果后续更换状态管理库，需要修改工具函数的代码

这种方式更贴合Redux的单向数据流理念，从使用工具函数的React组件中把token传递进去，避免工具函数直接依赖store。

先改造你的工具函数，让它接收token作为参数：

// src/utils/authService.js
export const fetchProtectedResource = async (userToken) => {
  if (!userToken) {
    throw new Error('用户未登录，请先登录');
  }

  const response = await fetch('https://your-api-endpoint.com/protected', {
    headers: {
      Authorization: `Bearer ${userToken}`
    }
  });

  return response.json();
};

然后在React组件中，通过mapStateToProps拿到token，再传给工具函数：

// src/components/ExampleComponent.js
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchProtectedResource } from '../utils/authService';

const ExampleComponent = ({ userToken }) => {
  useEffect(() => {
    const loadData = async () => {
      try {
        const data = await fetchProtectedResource(userToken);
        // 处理获取到的数据
        console.log(data);
      } catch (err) {
        // 处理错误
        console.error(err.message);
      }
    };

    loadData();
  }, [userToken]);

  return (
    // 组件渲染内容
    <View>...</View>
  );
};

// 从Redux state中映射token到组件props
const mapStateToProps = (state) => ({
  userToken: state.auth.user_token,
});

export default connect(mapStateToProps)(ExampleComponent);

优缺点分析：

• 优点：工具函数完全和Redux解耦，复用性更强，测试也更简单（直接传入mock token即可）
• 缺点：如果多个组件都要调用这个工具函数，每个组件都需要传递token，会有少量重复代码，但相比认证逻辑的冗余，这种重复是可接受的

如果你的项目用的是Redux Toolkit（现在官方推荐的Redux写法），方案1依然适用，只要导出store实例就行。另外，你也可以考虑把认证相关的API请求封装成Redux Thunk或者Saga，这样可以直接在异步action里获取state，不过这取决于你是否想把请求逻辑纳入Redux的流程中。

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