无法在Redux Toolkit初始状态获取AsyncStorage值，求非Redux Persist方案

先明确你现有代码的核心问题 #

1. logInUsers 异步Thunk逻辑错误：接收了用户名密码参数但完全未使用，也没有执行实际的登录请求，仅读取AsyncStorage，等于只做了缓存读取却没处理无缓存时的登录逻辑
2. 组件useEffect依赖缺失：依赖数组为空，导致didAttempt的状态变化无法触发逻辑重执行，存在闭包问题
3. initialState未定义sessionLoading字段，直接赋值会引发潜在的状态异常

解决方案一：修正现有逻辑，实现缓存优先+登录兜底 #

1. 完善异步Thunk逻辑

import { createAsyncThunk } from '@reduxjs/toolkit';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const logInUsers = createAsyncThunk('session/logIn', async (credentials, thunkAPI) => {
  const { user_username, user_password } = credentials;
  try {
    // 优先读取缓存的sessionId
    const cachedSessionId = await AsyncStorage.getItem('sessionId');
    if (cachedSessionId) {
      return cachedSessionId;
    }

    // 缓存不存在时，调用登录接口获取sessionId
    const response = await fetch('你的登录接口地址', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ user_username, user_password })
    });

    if (!response.ok) throw new Error('登录请求失败');
    const data = await response.json();
    const newSessionId = data.sessionId;

    // 将新sessionId存入AsyncStorage
    await AsyncStorage.setItem('sessionId', newSessionId);
    return newSessionId;
  } catch (error) {
    console.error(error);
    return thunkAPI.rejectWithValue(error.message);
  }
});

2. 修正Session Slice的初始状态与Reducer

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  sessions: null,
  sessionLoading: false,
  sessionError: null
};

const sessionSlice = createSlice({
  name: 'session',
  initialState,
  extraReducers: (builder) => {
    builder
      .addCase(logInUsers.pending, (state) => {
        state.sessionLoading = true;
        state.sessionError = null;
      })
      .addCase(logInUsers.fulfilled, (state, { payload }) => {
        state.sessionLoading = false;
        state.sessions = payload;
      })
      .addCase(logInUsers.rejected, (state, { payload }) => {
        state.sessionLoading = false;
        state.sessionError = payload;
      });
  }
});

// 必须导出reducer给store使用
export default sessionSlice.reducer;

3. 修正Store配置

import { configureStore } from '@reduxjs/toolkit';
import sessionReducer from './sessionSlice';

export const Store = configureStore({
  reducer: {
    session: sessionReducer
  }
});

4. 修正组件的Effect逻辑

import { useSelector, useDispatch } from 'react-redux';
import { useEffect } from 'react';
import { logInUsers } from './sessionSlice';

const LogoPage = () => {
  const { sessions: sessionId, sessionLoading } = useSelector(state => state.session);
  const dispatch = useDispatch();

  useEffect(() => {
    // 无sessionId且未在加载时，触发缓存读取/登录逻辑
    if (!sessionId && !sessionLoading) {
      dispatch(logInUsers({ user_username: 'King', user_password: 'king' }));
    }
  }, [sessionId, sessionLoading, dispatch]); // 添加所有依赖项避免闭包问题

  // 你的组件渲染逻辑
  return <></>;
};

解决方案二：应用启动时直接初始化Session #

如果不想和登录逻辑耦合，可以单独写一个初始化Session的Thunk，在应用根组件启动时执行：

1. 初始化Session的Thunk

export const initSession = createAsyncThunk('session/init', async (_, thunkAPI) => {
  try {
    const sessionId = await AsyncStorage.getItem('sessionId');
    return sessionId;
  } catch (error) {
    console.error(error);
    return thunkAPI.rejectWithValue(error.message);
  }
});

2. 在Slice中添加对应的Reducer

// 在sessionSlice的extraReducers中追加
builder.addCase(initSession.fulfilled, (state, { payload }) => {
  if (payload) state.sessions = payload;
});

3. 在根组件中执行初始化

import { useDispatch } from 'react-redux';
import { useEffect, useState } from 'react';
import { ActivityIndicator } from 'react-native';
import { initSession } from './sessionSlice';

function App() {
  const dispatch = useDispatch();
  const [isAppReady, setIsAppReady] = useState(false);

  useEffect(() => {
    const bootApp = async () => {
      // 执行Session初始化
      await dispatch(initSession()).unwrap();
      setIsAppReady(true);
    };
    bootApp();
  }, [dispatch]);

  // 初始化完成前显示加载状态
  if (!isAppReady) return <ActivityIndicator size="large" />;

  return (
    {/* 你的应用路由/主组件 */}
    <LogoPage />
  );
}

核心原理 #

不用Redux Persist完全可以实现需求，核心就是在应用启动或页面加载时，异步读取AsyncStorage中的值，再通过dispatch Action将值存入Redux Store，本质是手动实现了缓存到Store的同步逻辑。

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