그러면 SampleContainer에서 로딩 상태를 다음과 같이 조회할 수 있습니다.

    containers/SampleContainer.js

    import React from 'react';
    import { connect } from 'react-redux';
    import Sample from '../components/Sample';
    import { getPost, getUsers } from '../modules/sample';
    
    const { useEffect } = React;
    const SampleContainer = ({
      getPost,
      getUsers,
      post,
      users,
      loadingPost,
      loadingUsers
    }) => {
      // 클래스 형태 컴포넌트였다면 componentDidMount
      useEffect(() => {
        getPost(1);
        getUsers(1);
      }, [getPost, getUsers]);
      return (
        <Sample
          post={post}
          users={users}
          loadingPost={loadingPost}
          loadingUsers={loadingUsers}
        />
      );
    };
    
    export default connect(
      ({ sample, loading }) => ({
        post: sample.post,
        users: sample.users,
        loadingPost: loading.GET_POST,
        loadingUsers: loading.GET_USERS
      }),
      {
        getPost,
        getUsers
      }
    )(SampleContainer);

     

    코드를 저장하고 브라우저를 열어서 기능이 제대로 작동하는지 확인해 보세요.

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