AsyncStorage赋值给Redux初始状态得到Promise而非实际值如何解决

你当前的写法无法实现需求的核心原因是：同步执行的Redux初始化逻辑不会等待异步的AsyncStorage读取操作完成，async函数的返回值天生是Promise对象，你调用getData()后不等它resolve就直接赋值给initialState，拿到的自然是Promise而非实际值。

方案1：异步初始化Store（完全满足你把数据直接放入initialState的需求） #

把Store的创建逻辑封装到异步函数中，等待AsyncStorage读取完成后再生成Store，最终导出初始化函数供入口文件调用：

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

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

const middleware = [thunk]

// 导出异步初始化store的函数
export const initStore = async () => {
  // 先读取本地存储数据
  const userData = await AsyncStorage.getItem('user')
  const parsedUser = userData ? JSON.parse(userData) : null

  // 用拿到的真实数据生成初始状态
  const initialState = {
    userLogin : {user : parsedUser} 
  }

  // 再创建store
  const store = createStore (
    reducer,
    initialState,
    applyMiddleware(...middleware)
  )
  return store
}

在项目入口文件（比如index.js）中调用初始化函数：

import { initStore } from './store'
import { Provider } from 'react-redux'
import App from './App'
import { AppRegistry } from 'react-native'

// 等待store初始化完成再挂载App
initStore().then(store => {
  AppRegistry.registerComponent('你的应用名', () => () => (
    <Provider store={store}>
      <App />
    </Provider>
  ))
})

方案2：启动后异步拉取数据更新Store（更常用，无初始化阻塞） #

不需要等待数据读取完成就可以先创建Store，初始值先设为null，等App启动后通过thunk异步拉取数据更新Redux状态，用户感知不到加载差异：

1. 调整store.js代码，直接同步初始化

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

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

// 初始值先设为null
const initialState = {
  userLogin : {user : null} 
}

const middleware = [thunk]

const store = createStore (
  reducer,
  initialState,
  applyMiddleware(...middleware)
)

export default store

2. 新增读取本地存储的thunk action（比如放在userActions.js）

export const loadUserFromStorage = () => async (dispatch) => {
  const userData = await AsyncStorage.getItem('user')
  if (userData) {
    const parsedUser = JSON.parse(userData)
    dispatch({
      type: 'USER_LOAD_FROM_STORAGE',
      payload: parsedUser
    })
  }
}

3. 在userLoginReducer中新增对应状态处理逻辑

case 'USER_LOAD_FROM_STORAGE':
  return { ...state, user: action.payload }

4. 在App.js入口处触发数据拉取

import { loadUserFromStorage } from './actions/userActions'
import { useEffect } from 'react'
import { useDispatch } from 'react-redux'

function App() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(loadUserFromStorage())
  }, [dispatch])

  // 剩余App逻辑
}

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