Json structure changes once I close the app-CodePudding

I'm having a weird, issue, actually, I'm working with react-redux in a react-native app. when the user logs in, everything goes smoothly in the user profile, but once I close the app and go back again, I'm getting a weird JSON format.

User reducer :

import AsyncStorage from '@react-native-async-storage/async-storage';

export function userReducer(
  state = AsyncStorage.getItem('user') ? AsyncStorage.getItem('user') : null,

  action,
) {
  switch (action.type) {
    case 'LOGIN':
      return action.payload;
    case 'LOGOUT':
      return null;
    case 'VERIFY':
      return { ...state, verified: action.payload };
    case 'USER_LIST_RESET':
      return { users: [] };
    default:
      return state;
  }
}

  const submitForm = async () => {
  if (isValidForm()) {
    try {
     const { data } = await axios.post(
    'https://c36a-196-235-44-112.eu.ngrok.io/login',
        {
          email,
          password,
        },
      );
      dispatch({ type: 'LOGIN', payload: data });
      AsyncStorage.setItem('user', JSON.stringify(data));
      console.log('Logged In');
      navigation.navigate('home');
    } catch (error) {
      console.log(error.message);
    }
  }
};

Getting the user in the userProfile :

 const { user } = useSelector(state => ({ ...state }));
 console.log(user)

The first Data I get once I login :

{"first_name": "John", "id": "63b0a010c015dd4b1f5fdb2c", "last_name": "Doe", "message": "Register Success ! please activate your email to start", "picture": "pic.png", "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzYjBhMDEwYzAxNWRkNGIxZjVmZGIyYyIsImlhdCI6MTY3Mjk1MjU3NCwiZXhwIjoxNjczNTU3Mzc0fQ.XI9JnC4eeOQb5YJkNCC-Bqw4F9gpA1Xm6k_qJdkaXuw", "username": "JohnDoe", "verified": false}

The second data I get once I close and re open the app :

{"_A": null, "_x": 0, "_y": 1, "_z": "{\"id\":\"63b0a010c015dd4b1f5fdb2c\",\"username\":\"JohnDoe\",\"picture\":\"pic.png\",\"first_name\":\"John\",\"last_name\":\"Doe\",\"token\":\"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzYjBhMDEwYzAxNWRkNGIxZjVmZGIyYyIsImlhdCI6MTY3Mjk1MTY3NiwiZXhwIjoxNjczNTU2NDc2fQ.lVLg3pjfTFGt1K63v76sucinIUZJgOxSujSox12Xy0s\",\"verified\":false,\"message\":\"Register Success ! please activate your email to start\"}"}

I was trying to get the same data if I close the app, but I'm not, I'm actually getting another JSON form that is not compatible with the logic I'm working with.

CodePudding user response：

AsyncStorage.getItem() returns a Promise, it is an asynchronous function: https://reactnative.dev/docs/asyncstorage#getitem

So when retrieving an item you will either need to use async/await syntax to wait for the promise to resolve before you can do something with the retrieved item, or you will need to specify a callback function when calling AsyncStorage.getItem() in which you do something with the retrieved item.