Redux & Redux-thunk

Redux

구성

1. store
   • 저장소
   • 전역상태를 보관하는 곳
2. reducer
   • 상태를 변경하는 로직이 담긴 함수
   • 이전 상태와 액션을 받아 새로운 상태를 반환한다.
3. action
   • 상태 변화를 일으키는 객체
   • type 필드로 어떤 종류의 액션인지 구분
   • 액션 생성자 : 액션을 생성하는 함수
4. dispatch
   • 액션을 실행하여 리듀서에게 상태 변화를 요청하는 함수
   • 액션 객체를 인자로 받아 리듀서에 전달

동작

1. 액션을 디스패치
2. 리듀서가 그 액션을 처리하여 새로운 상태를 반환
3. 이 상태는 저장소에 저장

↪ 이로써 애플리케이션의 상태를 중앙에서 효과적으로 관리할 수 있다.

Redux Thunk

• Redux에서 비동기 작업을 처리하기 위한 미들웨어 중 하나
• 액션 생성자가 일반 객체뿐만 아니라 함수도 반환할 수 있게 되어, 비동기 작업을 처리할 수 있다.

기본적인 Redux 액션 생성자와의 차이

• 일반적인 액션 생성자: 객체를 반환하며, 이 객체는 type 필드를 갖고 있다. Redux는 이 객체를 리듀서에 전달하여 상태를 변경한다.

• Redux Thunk를 사용한 액션 생성자: 함수를 반환. 이 함수는 dispatch와 getState를 인자로 받아와서 비동기 작업을 수행하고, 필요한 경우 액션을 디스패치한다.

Redux Thunk를 사용하는 이유

• 비동기 작업 처리: 일반적인 Redux는 동기적인 작업에 특화. Redux Thunk를 사용하면 비동기 작업(예: API 호출, 데이터 가져오기 등)을 처리할 수 있다.

• 액션 생성자의 유연성: Thunk를 사용하면 액션 생성자가 단순한 객체뿐만 아니라 비동기 로직을 포함하는 함수를 반환할 수 있어, 더 유연한 상태 관리가 가능.

사용 예시

// Thunk 함수를 반환하는 액션 생성자 예시
const fetchData = () => {
  return async (dispatch, getState) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });

    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();

      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
    }
  };
};

위 코드에서 fetchData는 Thunk를 이용하여 비동기 작업을 처리하는 액션 생성자 함수
이 함수는 dispatch와 getState를 받아와서 비동기 로직을 처리하고, 작업이 성공하면 FETCH_DATA_SUCCESS 액션을 디스패치하고 실패하면 FETCH_DATA_FAILURE 액션을 디스패치한다.