Displaying Retrieved Data in Components

Outline

Now that we've built out the middleware, we need to update our reducer to update the state when action type HOME_PAGE_LOADED is dispatched.

Update the reducer to handle this action type

src/index.js

// ... 

const defaultState = { 
    appName: 'conduit',
    articles: null 
};


const reducer = function(state = defaultState, action) {
+ switch(action.type) {
+  case 'HOME_PAGE_LOADED':
+   return { ...state, articles: action.payload.articles };
+ }
    return state; 
};

const store = createStore(reducer, applyMiddleware(promiseMiddleware)); 

//...

You'll now be able to see something that resembles the list of retrieved articles. Let's create an ArticlePreivew component that takes in an article (from props) and displays it with some styling.

Create and Build Out the ArticlePreview component

src/components/ArticlePreview.js

import React from 'react';

const ArticlePreview = props => {
  const article = props.article;

  return (
    <div className="article-preview">
      <div className="article-meta">
        <a>
          <img src={article.author.image} />
        </a>

        <div className="info">
          <a className="author">
            {article.author.username}
          </a>
          <span className="date">
            {new Date(article.createdAt).toDateString()}
          </span>
        </div>

        <div className="pull-xs-right">
          <button
            className="btn btn-sm btn-outline-primary">
            <i className="ion-heart"></i> {article.favoritesCount}
          </button>
        </div>
      </div>

      <a to={`article/${article.slug}`} className="preview-link">
        <h1>{article.title}</h1>
        <p>{article.description}</p>
        <span>Read more...</span>
        <ul className="tag-list">
          {
            article.tagList.map(tag => {
              return (
                <li className="tag-default tag-pill tag-outline" key={tag}>
                  {tag}
                </li>
              )
            })
          }
        </ul>
      </a>
    </div>
  );
}

export default ArticlePreview;

Now, let's add the component to the ArticleList component.

Add the ArticlePreview component in the ArticleList component

+ import ArticlePreview from './ArticlePreview';
import React from 'react';

const ArticleList = props => {
  // ...
  return (
    <div>
      {
        props.articles.map(article => {
          return (
-          <h2>{article.title}</h2>                 
+          <ArticlePreview article={article} key={article.slug} />
          );
        })
      }
    </div>
  );
};
// ...

It's good practice to add a unique key value, so React knows that each article listed is unique. We're using the article's slug since it's unique to each article (API spec). You should now be able to see a list of articles that look like the demo site.

Check your work

You can view the completed & working code from this tutorial here:

Go Pro to unlock all content & remove ads

Displaying Retrieved Data in Components

Outline

Outline

Check your work

I finished! On to the next tutorial