게시물에 좋아요 기능을 추가하기 위해서는 비동기 작업을 처리해야 합니다. 이를 위해 Redux Thunk를 활용할 수 있습니다. Redux Thunk는 Redux의 미들웨어로, 비동기 작업을 처리하고 액션을 디스패치할 수 있게 해줍니다.

Redux Thunk 설치하기

먼저 Redux Thunk를 설치해야 합니다. 아래 명령어를 사용하여 패키지를 설치하세요:

npm install redux-thunk

또는

yarn add redux-thunk

액션과 액션 크리에이터 정의하기

게시물 좋아요 기능을 구현하기 위해 다음과 같은 액션과 액션 크리에이터를 정의해야 합니다:

// 액션 타입 정의
export const LIKE_POST = 'LIKE_POST';

// 액션 크리에이터
export const likePost = (postId) => {
  return {
    type: LIKE_POST,
    payload: postId
  }
}

액션 타입 LIKE_POST는 게시물을 좋아요하는 액션을 나타냅니다. likePost 액션 크리에이터는 게시물 ID를 매개변수로 받아 액션 객체를 생성합니다.

비동기 작업을 처리하는 Thunk 액션 크리에이터 작성하기

비동기 작업을 처리하기 위해 Redux Thunk를 사용하여 Thunk 액션 크리에이터를 작성해야 합니다. 아래와 같이 Thunk 액션 크리에이터를 작성하세요:

export const likePostAsync = (postId) => {
  return (dispatch) => {
    // 좋아요 API 호출 등의 비동기 작업 수행
    // ...

    // 비동기 작업이 완료되면 액션 디스패치
    dispatch(likePost(postId));
  }
}

Thunk 액션 크리에이터 likePostAsync는 postId를 매개변수로 받아서 좋아요 API를 호출하는 비동기 작업을 수행합니다. 작업이 완료되면 likePost 액션을 디스패치하여 액션 정보를 Redux 스토어로 전달합니다.

리듀서 업데이트하기

좋아요 기능을 처리하기 위해 리듀서를 업데이트해야 합니다. LIKE_POST 액션 타입에 대한 처리를 추가해야 합니다. 예를 들어:

const initialState = {
  posts: [],
  // ...
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case LIKE_POST:
      const { payload: postId } = action;
      // 게시물 좋아요 처리 로직 작성
      // ...

      return {
        ...state,
        // 업데이트된 상태 반환
      };
    // ...
  }
}

LIKE_POST 액션 타입에 대한 처리 부분에서 게시물 좋아요 처리 로직을 작성하고, 업데이트된 상태를 반환해야 합니다.

컴포넌트에서 사용하기

좋아요 기능을 화면에 표시하고 사용하기 위해서는 컴포넌트에서 Redux 스토어와 연결하여 액션을 디스패치해야 합니다. 아래와 같이 컴포넌트에서 Redux Thunk를 활용한 좋아요 기능을 사용할 수 있습니다:

import React from 'react';
import { connect } from 'react-redux';
import { likePostAsync } from './actions';

const Post = ({ post, likePostAsync }) => {
  const handleLike = () => {
    likePostAsync(post.id);
  }

  return (
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
      <button onClick={handleLike}>좋아요</button>
    </div>
  );
}

export default connect(null, { likePostAsync })(Post);

위의 코드에서 connect 함수를 사용하여 Redux 스토어와 연결하고 likePostAsync 액션 크리에이터를 컴포넌트의 props로 전달하여 사용할 수 있습니다.

이제 Redux Thunk를 활용한 게시물 좋아요 기능이 작동하는 컴포넌트를 만들었습니다!

결론

Redux Thunk를 활용하면 비동기 작업을 처리하고 게시물 좋아요 기능과 같은 상태 업데이트를 처리할 수 있습니다. 위에서 소개한 방법을 참고하여 프로젝트에 적용해보세요!

#React #Redux #Thunk