티쳐 리덕스 툴킷에서 async await

[정중식]

사용 못하나요?
어디서읽었는데 자동으로 async await을 해준다고 읽었는데..맞나요?
아니면 리덕스툴킷 + 리덕스 thunk를 같이사용해줘야하나요 
아래 사진처럼 뭐 로딩이필요하다던가.. 이럴때 아래사진처럼해주면되는건가요?

[codingapple]

ajax요청이 필요하면 컴포넌트에서 하고 그 결과를 dispatch만 합시다

[정중식]

선생님 답변 감사합니다. 
혹시 왜 그렇게 답변주셨는지 조금 더 들려주실수있을까요?
혼자서 제가 올린 사진처럼 구현도해보고 선생님이 하라는것처럼도 해봤는데 음 .. 모르겠어요
선생님이 하라는대로하면 솔직히 복잡하지도않고, 간단하구 
그리고 사진대로 하면 복잡하지만 어차피 처음 구조만 좀 짱나고.. 복붙하는식으로하면 괜찮은거같아요
근데 글쓰면서 다시 사진보고, 제가 짠 코드봤는데 선생님이 하라는대로해야겠네요..
선생님도 간단하다는 이유로 그렇게 추천해주신걸까요?

[정중식]

선생님 추가로 맨 처음 질문에서의 사진처럼 구현했다가 선생님 말씀듣고 다시 아래 사진처럼 컴포넌트에서 ajax요청하고, 결과를 디스패치만하는식으로했는데요,

불가피하게 axios안에 axios를 쓰게됬는데 이런식으로 해도 괜찮나요?..

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!userId || userId === '') {
      inputRef.current[0].focus();
      return setMessage('유저 아이디를 입력해주세요!');
    }

    if (userId.length < 4) {
      inputRef.current[0].focus();
      return setMessage(`아이디가 너무 짧아요! (최소 4글자)`);
    }
    if (userId.length > 12) {
      inputRef.current[0].focus();
      return setMessage(`아이디가 너무 길어요! (최대 12글자)`);
    }

    if (!password || password === '') {
      inputRef.current[1].focus();
      return setMessage('비밀번호를 입력해주세요!');
    }

    axios({
      method: 'post',
      url: '/api/auth/login',
      data: {
        userId,
        password,
      },
    })
      .then((res) => {
        if (res.data?.token) {
          localStorage.setItem('token', JSON.stringify(res.data.token));
          setAuthToken(JSON.parse(localStorage.token));

          axios
            .get('/api/auth')
            .then((res) => dispatch(loadUser(res.data.user), navigator('/')));
        }
      })
      .catch((err) => {
        console.log(err.response.data.errors);
        setMessage(err.response.data.errors[0].msg);
      });
  };

왜 이렇게 됬냐면.. 
저는 쿠키에 토큰을안넣고 프론트에서 헤더에 토큰을담아서 서버에보내주면 서버는 그걸 기반으로 유저를 찾고 유저정보를 유저한테 보내는식으로 구현을했어요
그러다보니 이렇게됬는데.. 상관없나염?

[codingapple]

리듀서들 안에서는 원래 ajax요청 불가능해서 밖에서 해야합니다 
ajax요청이 100개 있으면 사진처럼하는게 관리차원에서 좋을 뿐입니다 

ajax요청을 순차적으로 하고 싶으면 맞는방법입니다

[정중식]

감사합니다!

[글쓴이]

글