React Native集成Redux使用AsyncStorage报错：需要')'结束复合表达式

• 直接原因：你在模块顶层作用域使用了await关键字，React Native默认运行环境不支持顶层await，语法解析失败才触发了该报错。
• 深层原因：AsyncStorage是全异步API，所有调用都返回Promise，完全不能直接替换web端localStorage的同步调用逻辑，你直接照搬web端的初始化逻辑本身就不兼容React Native环境。
• 额外问题：你代码中使用的combineReducers、createStore、applyMiddleware没有从redux包导入，也是潜在报错点。

推荐使用Redux生态的标准持久化方案redux-persist适配AsyncStorage，实现逻辑如下：

1. 先安装依赖

npm install redux-persist
# 或使用yarn
yarn add redux-persist

2. 修改store.js代码：

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { userLoginReducer, userRegisterReducer } from './src/redux/reducers/userReducers';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistStore, persistReducer } from 'redux-persist';

// 持久化配置
const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  // 只持久化需要的reducer，避免不必要的存储
  whitelist: ['userLogin']
};

const rootReducer = combineReducers({
  userLogin: userLoginReducer,
  userRegister: userRegisterReducer
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

const middleware = [thunk];

const store = createStore(
  persistedReducer,
  applyMiddleware(...middleware)
);

const persistor = persistStore(store);

export { store, persistor };

3. 修改项目入口文件（通常是App.js或index.js），用PersistGate包裹应用组件，等持久化数据读取完成后再渲染页面：

import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';

// 你的根组件
const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {/* 原有应用内容 */}
      </PersistGate>
    </Provider>
  );
};

export default App;

可选手动初始化方案 #

如果你不想引入额外依赖，也可以把store创建逻辑封装为异步函数，等待AsyncStorage读取完成后再初始化：

// store.js
import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { userLoginReducer, userRegisterReducer } from './src/redux/reducers/userReducers';
import AsyncStorage from '@react-native-async-storage/async-storage';

const rootReducer = combineReducers({
  userLogin: userLoginReducer,
  userRegister: userRegisterReducer
});

const middleware = [thunk];

// 导出异步初始化函数
export const getStore = async () => {
  // 读取存储的用户信息，记得做JSON解析
  const userInfoStr = await AsyncStorage.getItem("userInfo");
  const userInfoFromStorage = userInfoStr ? JSON.parse(userInfoStr) : null;

  const initialState = {
    userLogin: {userInfo: userInfoFromStorage}
  };

  return createStore(
    rootReducer,
    initialState,
    applyMiddleware(...middleware)
  );
};

入口文件处等待store初始化完成再渲染：

import { Provider } from 'react-redux';
import { getStore } from './store';
import { useEffect, useState } from 'react';

const App = () => {
  const [store, setStore] = useState(null);

  useEffect(() => {
    const initStore = async () => {
      const initializedStore = await getStore();
      setStore(initializedStore);
    };
    initStore();
  }, []);

  if (!store) return null; // 可替换为加载动画

  return (
    <Provider store={store}>
      {/* 原有应用内容 */}
    </Provider>
  );
};

export default App;

• AsyncStorage读写的都是字符串类型，存储对象时需要用JSON.stringify转换，读取时需要用JSON.parse解析，不能直接存取对象
• 不要在同步逻辑中直接调用AsyncStorage的API，所有操作都要配合async/await或then/catch使用
• 原web端的localStorage同步逻辑必须全部调整为异步逻辑，不能直接复用

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