对接Laravel登录API到React Native CLI是否需要使用Redux？

是否必须使用Redux #

Redux并非该开发场景下的必选依赖，你可以根据项目的实际规模选择方案：

• 若你的应用仅需要基础登录、token校验功能，没有大量跨页面共享的全局状态，直接使用React Native原生的useState+useContext+异步存储方案即可，无需引入Redux增加项目复杂度。
• 若你的应用规模较大，存在多页面依赖的用户权限、全局配置、复杂跨组件数据流等需求，可以选择引入Redux，当前官方推荐使用Redux Toolkit来减少样板代码编写。

具体集成实现方案 #

统一前提：请先确保Laravel端登录接口调试正常，常规接口逻辑为接收email、password的POST请求，校验通过后返回access_token（JWT格式或Sanctum token都可）、用户基础信息，后续业务请求在请求头携带Authorization: Bearer {token}即可完成鉴权。

方案1：不使用Redux的轻量实现 #

1. 安装基础依赖

npm install @react-native-async-storage/async-storage axios

2. 封装全局Axios实例，统一处理请求拦截

// utils/request.js
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

const request = axios.create({
  baseURL: '替换为你的Laravel服务域名',
  timeout: 10000,
});

// 请求拦截器自动注入token
request.interceptors.request.use(async (config) => {
  const token = await AsyncStorage.getItem('user_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default request;

3. 封装全局AuthContext管理登录状态

// context/AuthContext.js
import { createContext, useContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import request from '../utils/request';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  // 初始化读取本地存储的登录状态
  useEffect(() => {
    const initAuth = async () => {
      const savedUser = await AsyncStorage.getItem('user_info');
      if (savedUser) setUser(JSON.parse(savedUser));
      setLoading(false);
    };
    initAuth();
  }, []);

  // 登录方法
  const login = async (email, password) => {
    const { data } = await request.post('/api/login', { email, password });
    const { access_token, user } = data;
    await AsyncStorage.setItem('user_token', access_token);
    await AsyncStorage.setItem('user_info', JSON.stringify(user));
    setUser(user);
    return data;
  };

  // 登出方法
  const logout = async () => {
    await request.post('/api/logout');
    await AsyncStorage.multiRemove(['user_token', 'user_info']);
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, loading, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

4. 在项目入口文件（一般为index.js或App.js）用AuthProvider包裹根组件，之后在登录页面直接调用useAuth()暴露的login方法即可，其他页面也可以直接通过该hook读取登录状态。

方案2：使用Redux Toolkit的实现 #

1. 安装相关依赖

npm install @reduxjs/toolkit react-redux @react-native-async-storage/async-storage axios redux-persist

2. 封装auth状态切片

// store/slices/authSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import request from '../../utils/request';
import AsyncStorage from '@react-native-async-storage/async-storage';

// 异步登录请求
export const login = createAsyncThunk(
  'auth/login',
  async ({ email, password }, { rejectWithValue }) => {
    try {
      const { data } = await request.post('/api/login', { email, password });
      const { access_token, user } = data;
      await AsyncStorage.setItem('user_token', access_token);
      return user;
    } catch (err) {
      return rejectWithValue(err.response?.data?.message || '登录失败');
    }
  }
);

// 异步登出请求
export const logout = createAsyncThunk('auth/logout', async () => {
  await request.post('/api/logout');
  await AsyncStorage.multiRemove(['user_token', 'user_info']);
});

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    user: null,
    loading: false,
    error: null,
  },
  extraReducers: (builder) => {
    builder
      // 登录状态处理
      .addCase(login.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(login.fulfilled, (state, action) => {
        state.loading = false;
        state.user = action.payload;
      })
      .addCase(login.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      })
      // 登出状态处理
      .addCase(logout.fulfilled, (state) => {
        state.user = null;
      });
  }
});

export default authSlice.reducer;

3. 配置Redux Store及持久化

// store/index.js
import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
import authReducer from './slices/authSlice';

const persistConfig = {
  key: 'auth',
  storage: AsyncStorage,
};

const persistedAuthReducer = persistReducer(persistConfig, authReducer);

export const store = configureStore({
  reducer: {
    auth: persistedAuthReducer,
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
    serializableCheck: false,
  }),
});

export const persistor = persistStore(store);

4. 入口文件用Redux Provider和PersistGate包裹根组件，登录页面通过useDispatch触发login方法，通过useSelector读取全局的登录状态、加载状态、错误信息即可。

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