액션을 추가한 뒤에는 PostViewerContainer를 다음과 같이 수정해 보세요.

    containers/post/PostViewerContainer.js

    import React, { useEffect } from 'react';
    import { useDispatch, useSelector } from 'react-redux';
    import { withRouter } from 'react-router-dom';
    import { readPost, unloadPost } from '../../modules/post';
    import PostViewer from '../../components/post/PostViewer';
    import PostActionButtons from '../../components/post/PostActionButtons';
    import { setOriginalPost } from '../../modules/write';
    
    const PostViewerContainer = ({ match, history }) => {
      // 처음 마운트될 때 포스트 읽기 API 요청
      const { postId } = match.params;
      const dispatch = useDispatch();
      const { post, error, loading, user } = useSelector(({ post, loading, user }) => ({
        post: post.post,
        error: post.error,
        loading: loading['post/READ_POST'],
        user: user.user,
      }));
    
      useEffect(() => {
        dispatch(readPost(postId));
        // 언마운트될 때 리덕스에서 포스트 데이터 없애기
        return () => {
          dispatch(unloadPost());
        };
      }, [dispatch, postId]);
    
      const onEdit = () => {
        dispatch(setOriginalPost(post));
        history.push('/write');
      };
    
      return (
        <PostViewer
          post={post}
          loading={loading}
          error={error}
          actionButtons={<PostActionButtons onEdit={onEdit} />}
          ownPost={user && user.id = = = post && post.id}
        />
      );
    };
    
    export default withRouter(PostViewerContainer);

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.