how can i use async await in useEffect when i use reactnative?

Question

When useEffect is executed, I want to get the token through AsyncStorage, then get the data value through the axios.post ('/auth/me') router and execute the KAKAOLOG_IN_REQUEST action with disaptch.

As a result of checking the data value with console.log, the data value came in well. But when I run my code, this error occurs.

    Possible Unhandled Promise Rejection (id: 1):
    Error: Actions may not have an undefined "type" property. Have you misspelled a constant?
    Error: Actions may not have an undefined "type" property. Have you misspelled a constant?

how can i fix my code?....

this is my code

(index.js)

    const App = ({}) => {
      const dispatch = useDispatch();
      useEffect(() => {
        async function fetchAndSetUser() {
          const token = await AsyncStorage.getItem('tokenstore', (err, result) => {
          });
          var {data} = await axios.post(
            '/auth/me',
            {},
            {
              headers: {Authorization: `Bearer ${token}`},
            },
          );
          console.log("data:",data);
          
          dispatch({
            type: KAKAOLOG_IN_REQUEST,
            data: data,
          });
        }
        fetchAndSetUser();
      }, []);

      return <Navigator />;
    };

    export {App};

(reducer/user.js)

    import {
      KAKAOLOG_IN_FAILURE,
      KAKAOLOG_IN_REQUEST,
      KAKAOLOG_IN_SUCCESS,
    
    } from '../reducers/user';



    function* watchkakaoLogIn() {
      yield takeLatest(KAKAOLOG_IN_REQUEST, kakaologIn);
    }



    function* kakaologIn(action) {
      try {
        // const result = yield call(kakaologInAPI, action.data);
        yield put({
          type: KAKAOLOG_IN_SUCCESS,
          data: action.data,
        });
      } catch (err) {
        console.error(err);
        yield put({
          type: KAKAOLOG_IN_FAILURE,
          error: err.response.data,
        });
      }
    }

    export default function* userSaga() {
      yield all([
        fork(watchkakaoLogIn),
      
      ]);
    }

(reducer/index.js)

    import { combineReducers } from 'redux';

    import user from './user';
    import post from './post';

    // (이전상태, 액션) => 다음상태
    const rootReducer = (state, action) => {
      switch (action.type) {
        // case HYDRATE:
        //   // console.log('HYDRATE', action);
        //   return action.payload;
        default: {
          const combinedReducer = combineReducers({
            user,
            post,
          });
          return combinedReducer(state, action);
        }
      }
    };

    export default rootReducer;

(src/index.js)

    import {KAKAOLOG_IN_REQUEST} from '../sagas/user';



    const App = ({}) => {
      const dispatch = useDispatch();

      useEffect(() => {
        async function fetchAndSetUser() {
          try {
            const token = await AsyncStorage.getItem('tokenstore');
            const {data} = await axios.post(
              '/auth/me',
              {},
              {
                headers: {Authorization: `Bearer ${token}`},
              },
            );
            console.log('data::::::', data);

            dispatch({
              type: 'KAKAOLOG_IN_REQUEST',
              data: data,
            });
          } catch (error) {
          }
        }
        fetchAndSetUser();
      }, []);

      return <Navigator />;
    };

    export {App};

Answer 1

Issue

The error message is saying your code can throw an error and it isn't handled. It is also saying that KAKAOLOG_IN_REQUEST is undefined for some reason (perhaps you forgot to import it, or it is really a string).

Solution

Surround your asynchronous code in a try/catch. Define KAKAOLOG_IN_REQUEST or pass as a string "KAKAOLOG_IN_REQUEST".

useEffect(() => {
  async function fetchAndSetUser() {
    try {
      const token = await AsyncStorage.getItem('tokenstore');
      const {data} = await axios.post(
        '/auth/me',
        {},
        {
          headers: { Authorization: `Bearer ${token}` },
        },
      );
      console.log("data:",data);
      
      dispatch({
        type: 'KAKAOLOG_IN_REQUEST',
        data: data,
      });
    } catch(error) {
      // handle error, logging, etc...
    }
  }
  fetchAndSetUser();
}, []);