How to display loaded posts with React and Redux

Question

I'm new to React and Redux, and im trying to load posts from the WordPress REST API, and display them in my React App.

I'm using this as an example: https://github.com/jackreichert/a-wp-react-redux-theme

My action to get the posts look like this:

import axios from 'axios';
export const FETCH_POSTS = 'FETCH_POSTS';

export function fetchPosts(post_type = 'posts') {
    return function (dispatch) {
        axios.get(`http://localhost:8080/wp-json/wp/v2/${post_type}`)
            .then(response => {
                dispatch({
                    type: FETCH_POSTS,
                    payload: response.data
                });
            });
    }
}

It's passed to the reducer, which looks like this:

import { FETCH_POSTS } from '../actions';

export default (state = [], action) => {
    switch (action.type) {
        case FETCH_POSTS:
            return action.payload;
        default :
            state = '';
        break;
    }
    return state;
}

And (though it's only one reducer) I'm combining it, because there are more reducers to follow (just like in the example), and then I'm storing it. Also pretty much the same way as the example.

Im loading everything in my Home.jsx file, which looks like this right now:

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Link } from 'react-router-dom';

import Header from '../Header';
import {fetchPosts} from '../../actions/';

class Home extends Component{
    componentDidMount(){
        document.title = 'Test';
    }

    componentWillMount() {
        this.getPosts(this.props, true);
    }

    componentWillReceiveProps(nextProps) {
        this.getPosts(nextProps);
    }

    getPosts(props, willMount = false) {
        if (willMount) {
            this.props.fetchPosts();
        }
    }
    render() {
        return(
            <div>
                <Header/>
                <main>
                  <h1>Home</h1>
                </main>
            </div>
        )
    }
}

function mapStateToProps({posts}) {
    return {posts};
}

export default connect(mapStateToProps, {fetchPosts})(Home);

I think my code above is right. Redux can also 'find' my posts, and logs in my console:

action FETCH_POSTS @ 11:11:56.393
    prev state Object {posts: ""}
    action     Object {type: "FETCH_POSTS", payload: Array(2)}
    next state Object {posts: Array(2)} 

Now I want to know: How can I simply display the posts which are loaded by Redux, in my Home.jsx file. And after that: How can I configure the route and data, to go to a single post (but that will come later, for now I only want to know an easy but right way how to display the posts)

Answer 1

I have no idea about the structure of your Post object. But it should be something like this.

renderPosts() {
  return _.map(this.props.posts, post => {
    return (
      <li className="list-group-item" key={post.id}>
          {post.title}
      </li>
    );
  });
}

Then in your render method merely call it like this.

  render() {
    return (
      <div>
        <h3>Posts</h3>
        <ul className="list-group">
          {this.renderPosts()}
        </ul>
      </div>
    );
  }

Also notice that I am using map helper from lodash library here. So you need to have following import statement in your component.

import _ from 'lodash';

Hope this helps. Happy coding !