Redux에 대해 자세히 알아보기

학습 목표

• Handling Async Tasks With Redux
• Where To Put Our Code
• The Redux DevTools

Diving Deeper Into Redux: A Closer Look

Handling Async Tasks With Redux

Reducers는 순수, side-effect가 없고 동기 함수여야 한다. 그렇다면 side-effect, 비동기 처리를 어디에 써야 할까?

1. 컴포넌트 안에 사용한다. (e.g. useEffect())
2. action creators 안에 사용한다.

우리는 동기, side-effect 없는 코드(데이터 변환)는 Reducer에 작성하는 걸 선호해야 하고 Action creators나 컴포넌트는 피해야 한다. 반대로 비동기, side-effect 코드는 Action creators나 컴포넌트에 작성하는 걸 선호해야 하고 절대로 Reducer에 적어선 안된다.

Where To Put Our Code

Reducer 함수에 작성할 수 없다면 backend API가 데이터를 변환하고 저장하는 방법도 있다. 만약 backend에서 데이터를 저장만 한다면 프론트엔드에서 데이터를 변환하고 보내야할 것이다.

그렇다면 이제 어디에 넣으면 좋을지 결정해보자.

컴포넌트 안에 사용하기

간단하다. useEffect를 이용해서 cart 데이터가 변경될 때마다 PUT 요청 해주면 된다. 그러나 이 방법은 앱이 시작될 때 실행된다는 문제점이 있다. 초기 카트가 이미 저장된 데이터를 덮어쓰기 때문에 문제가 발생한다.

// App.js
const cart = useSelector((state) => state.cart);

useEffect(() => {
  fetch(
    "https://react-getting-started-d2fc4-default-rtdb.firebaseio.com/cart.json",
    {
      method: "PUT",
      body: JSON.stringify(cart),
    }
  );
}, [cart]);

처음에 실행하지 않게 하기 위한 방법이 있다. 아래 코드처럼 작성하면 문제 해결이다

let isInitial = true;

useEffect(() => {
  if (isInitial) {
    isInitial = false;
    return;
  }
});

action creator “Thunk” 사용하기

컴포넌트 안에 모든 side-effect 코드를 다 넣는 것도 좋은 방법이지만 action creator를 이용하는 것도 하나의 방법이다. Thunk를 사용하면 된다. 이는 action을 나중에까지 지연시킬 수 있는 함수이다. 즉, 디스패치하기 전에 다른 코드를 실행할 수 있다. action을 반환하는 것이 action을 반환할 다른 함수를 반환한다.

1. 외부에 함수를 만든다. 반환 함수는 async/await를 사용할 수 있다.
2. 컴포넌트에서 함수를 불러오고 dispatch의 인자에 넣는다.

// cart-slice.js
export const sendCartData = (cart) => {
  return async (dispatch) => {
    dispatch(
      uiActions.showNotification({
        // 생략
      })
    );

    const sendRequest = async () => {
      // 생략
    };

    try {
      await sendRequest();

      dispatch(
        uiActions.showNotification({
          // 생략
        })
      );
    } catch (error) {
      dispatch(
        uiActions.showNotification({
          // 생략
        })
      );
    }
  };
};

// App.js
import { sendCartData } from "./store/cart-slice";

dispatch(sendCartData(cart));

이 과정은 Toolkit이 자동으로 파악하고 처리한다. type 객체가 아니어도 작동하는 이유다.

The Redux DevTools

큰 앱에서는 오류를 찾기 어려울 수 있다. 그래서 Redux 상태를 보여주는 Devtool을 사용하면 편하다. 만약 toolkit 없이 redux로 사용하려면 설정을 해야하지만 toolkit은 그렇지 않아도 되니 편하다!

---

강의명

• Udemy : React 완벽 가이드