1

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};
1
  • From where KAKAOLOG_IN_REQUEST is coming ? Is it imported in a right way ? Commented Apr 16, 2021 at 5:30

1 Answer 1

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();
}, []);
Sign up to request clarification or add additional context in comments.

3 Comments

thank you it works!!!!! but i wonder... KAKAOLOG_IN_REQUEST was imported when an error occurred. However, it worked properly when I changed it to "KAKAOLOG_IN_REQUEST". What I'm curious about is that in other cases, KAKAOLOG_IN_REQUEST worked fine, but why should "KAKAOLOG_IN_REQUEST" work in this part?
@user15322469 Dunno, maybe you mixed up named vs default export/import? I could help shed some light on this if you share your code, how you export and import KAKAOLOG_IN_REQUEST.
@user15322469 So I see a named import import { KAKAOLOG_IN_REQUEST } from '../sagas/user';. How is KAKAOLOG_IN_REQUEST exported from "../sagas/user"?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.