[React] Section 20

리듀서 함수는 반드시 순수 함수여야 하며 부수효과가 없고 동기식이어야 한다.

 

어디에 side effect와 비동기 작업이 실행되어야 하는가?

-> useEffect를 사용하여 컴포넌트 안에 넣는다.

-> action creator 안에 넣는다.

 

우리의 logic 코드를 어디에 두어야 하는가?

동기적이고, side effect가 없는 코드 (ex 데이터 변환) : reducer 사용, action creators나 컴포넌트를 피할 것

비동기적이거나 side effect가 있는 코드 : action creators나 컴포넌트를 사용하고 reducer는 절대 사용하지 말 것

 

리덕스와 함께 useEffect 사용하기

useSelector가 리덕스에 대한 구독을 설정한다. 리덕스 스토어가 변경될 때 마다 컴포넌트 함수가 다시 실행되고 최신 상태가 된다.

 

const showCart = useSelector((state) => state.ui.cartIsVisible);
  const cart = useSelector((state) => state.cart);

  useEffect(() => {
    fetch("~firebase 경로~", {
      method: "PUT",
      body: JSON.stringify(cart),
    });
  }, [cart]);

 

-> lean component가 모든 논리를 사용하여 fat 리듀서를 만든 다음 리덕스 상태에 따라 달라지는 부수 효과를 수행 할 수 있게 된다!!!

 

useEffect 안에 비동기식 코드를 작성하는 방법

useEffect(() => {
    const sendCartData = async () => {
      const response = await fetch(
        "~firebase 경로~",
        {
          method: "PUT",
          body: JSON.stringify(cart),
        }
      );
    };
  }, [cart]);

 

Thunk

Thunk는 다른 작업이 완료될 때까지 작업을 지연시키는 단순한 함수이다.

 

리덕스의 가장 큰 장점은 유형 프로퍼티가 있는 작업 개체만 허용하는 것이 아니라 함수를 반환하는 작업 크리에이터도 허용한다는 것이다.

 

Redux DevTools

리덕스 툴킷 없이 리덕스를 사용할 때는 리덕스 데브툴이 작동하도록 몇 가지 추가코드를 설정해야 한다.

리덕스 툴킷을 사용하면 즉시 사용할 수 있어 편리하며 이를 통해 해당 확장에 바로 액세스 할 수 있다.