리액트 - redux-thunk로 promise다루기 - 포스트 리스트 구현

이전에 작성한 post 모듈을 사용한 postlist 컴포넌트를 작성해보자.

props 로 {posts}를 받아와서 id 와 title값을 활용해서 렌더링한다.

import React from 'react'

const PostList = ({posts}) => {
  return (
    <ul>
        {
            posts.map(post => (<li key={post.id}>{post.title}</li>))
        }
    </ul>
  )
}

export default PostList

posts는 리듀서를 dispatch해서 얻은 값을 PostList에 전송할 것이다. 이때 값을 전송하는 컴포넌트인 PostListContainer를 작성했다.

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import PostList from '../components/PostList';
import { getPosts } from '../modules/posts';

const PostListContainer = () => {
    const { data, loading , error } = useSelector(state => state.posts.posts)
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(getPosts())
    },[dispatch])

    if (loading) return <div>로딩중...</div>
    if (error) return <div>에러 발생!</div>
    if (!data) return null
  return (
    <PostList posts={data}/>
  )
}

export default PostListContainer

state.posts.posts : rootReducer에서 posts 모듈내부에 선언한 posts 객체에서의 데이터를 뜻한다.
useEffect를 사용해서 페이지가 로드 되는 순간 getPosts()를 dispatch 해서 해당 상태에 따른 렌더링을 따로 선언했다.

최종적으로 App.js에서 렌더링되는 컴포넌트를 PostListContainer로 수정한뒤 실행하면

import React from 'react'
import CounterContainer from './containers/CounterContainer';
import PostListContainer from './containers/PostListContainer';


function App() {
  return (
   <PostListContainer/>
  );
}

export default App;

이렇게 데이터가 렌더링 된 것을 확인할수 있다. 야호