redux done, styled components props

Redux store의 done

redux store에 loading도 있는데 done이라는 변수는 필요 없을 것 같았는데 필요한 경우가 생겼다.

컴포넌트에서 직접 비동기 통신을 하면
async await으로 Promise에서 정상 응답이 오길 기다렸다가 진행하는 것이 가능했는데
리덕스사가를 이용하게 되면 사가에서 비동기 통신을 하고 컴포넌트에선 그 결과를 확인 하기 위해선 store 변수를 이용해야 한다.

import { useDispatch, useSelector } from 'react-redux';

const { createLectureLoading, createLectureData, createLectureDone } = useSelector(
    (state: RootState) => state.lecture
  );

useEffect(() => {
  console.log('create_course useEffect');
  if (createLectureDone) {
    const { id } = createLectureData;
    router.push(`/course/${id}/edit/course_info`);
  }
}, [createLectureDone]);

강의를 생성 후 서버에서 생성된 아이디를 받아서 해당 페이지로 하게 하는 것을 구현하기 위해 store에 done이라는 변수를 하나 더 만들었다.

styled components props

이번에 로딩 버튼을 만들려다 보니 버튼에 로딩 상태를 전달 할 수 있으면 좋겠다는 생각이 들었다.
styled components는 props을 전달 할 수 있다.

interface IBtnProps {
  loading: boolean;
}

const BtnMakeCourse = styled.button`
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 4px;
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 24%);
  background-color: var(--color-light-green);
  margin-top: 48px;
  width: 126px;
  height: 48px;
  pointer-events: ${(props: IBtnProps) => (props.loading ? 'none' : 'auto')};
  opacity: ${(props: IBtnProps) => (props.loading ? 0.7 : 1)};
`;

<BtnMakeCourse loading={createLectureLoading} type="button" onClick={onClickBtnCreate}>
          강의 만들기
        </BtnMakeCourse>