React Native中Redux Persist存储access_token获取为undefined问题求助

问题描述 #

我在React Native应用中使用Redux Persist，相关代码如下：

store.js #

import {createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {persistStore, persistReducer} from 'redux-persist';

import authReducer from './reducer';

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

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

export const store = createStore(rootReducer, applyMiddleware(thunk));
export const persistor = persistStore(store);

action.js #

// Define action types
 export const CREATE_USER = 'CREATE_USER';
 export const INTRO_DONE = 'INTRO_DONE';
 export const VERIFY_USER = 'VERIFY_USER';
 export const GET_ACCESS_TOKEN = 'GET_ACCESS_TOKEN';

 export const createUser = users => dispatch => {
  dispatch({
   type: CREATE_USER,
    payload: users,
 });
};

export const getAccessToken = access_token => dispatch => {
 dispatch({
 type: GET_ACCESS_TOKEN,
 payload: access_token,
});
};

reducer.js #

import {CREATE_USER, GET_ACCESS_TOKEN, INTRO_DONE, VERIFY_USER} from './action';

 const initialState = {
  users: {},
  access_token: '',
 };

  function authReducer(state = initialState, action) {
switch (action.type) {
 case CREATE_USER:
  return {...state, users: action.payload};
case GET_ACCESS_TOKEN:
  return {...state, access_token: action.payload};
 default:
  return state;
  }
 }

export default authReducer;

我通过以下方式存储数据：

const dispatch = useDispatch();
dispatch({
type: CREATE_USER,
user: response.data,
})

dispatch({
type: GET_ACCESS_TOKEN,
user: response.data.data.access_token,
})

尝试在reducer中打印时，access_token已有存储数据，但通过以下代码获取时access_token为undefined：

const {access_token, users} = useSelector(state => state.authReducer);

其中users数据能正常输出，但access_token始终为undefined，请问该如何解决这个问题？

解决方法 #

问题根源 #

你的reducer中是从action.payload字段读取数据，但手动dispatch action时，错误地使用了user字段传递数据，导致action.payload为undefined，最终access_token被赋值为undefined。

修复步骤 #

1. 修正手动dispatch的action结构，将user替换为payload，与reducer的预期结构保持一致：

   const dispatch = useDispatch();
   // 修正CREATE_USER的action
   dispatch({
     type: CREATE_USER,
     payload: response.data,
   })
   
   // 修正GET_ACCESS_TOKEN的action
   dispatch({
     type: GET_ACCESS_TOKEN,
     payload: response.data.data.access_token,
   })
   

2. 推荐使用已定义的action creator，避免手动拼写action时出错：

   const dispatch = useDispatch();
   // 使用createUser action creator
   dispatch(createUser(response.data));
   // 使用getAccessToken action creator
   dispatch(getAccessToken(response.data.data.access_token));
   

额外说明 #

你提到users能正常输出是个巧合或笔误——按照原代码逻辑，CREATE_USER的action同样没有传递payload，users应该也是undefined。修正后可以确保所有数据都能正常存储和读取。

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