Redux is not updating initialState

Question

I'm retrieving posts from my actions, and its not showing up in

console.log(this.props.posts)

however it does show up under the actions console.log

Instead i get this

ideally in the posts:Array It should show Array(2) So it appears that redux is not updating the initialState posts array making it impossible to retrieve posts. And changing action.data.data to action.data won't change anything.

actions.js

export const GetPosts = () => {
    return (dispatch, getState) => {
        return Axios.get('/api/posts/myPosts')
            .then( (res) => {
                 const data = {
                     data: res.data
                 }
                 console.log(data); // logs data and i can see an array 
                 dispatch({type: GET_POSTS, data })
             })

    }
}

So i update the state so i can be able to retrieve it in a component.

posts.js

import { POST_FAIL, GET_POSTS, POST_SUCC, DELETE_POST} from '../actions/';

const initialState = {
    post: [],
    postError: null,
    posts:[]
}

export default (state = initialState, action) => {
    switch (action.type) {
        case POST_SUCC:
            return ({
                ...state,
                post:action.post
            });

        case POST_FAIL:
            return({
                ...state,
                postError: action.err.response.data
            })
        case GET_POSTS:
            // console.log(action.data.data)
            return {...state, posts: action.data.data}
        // case DELETE_POST:
        //     return ({
        //         ...state,
        //        posts: action.posts.filter(post => post.id !== action.posts[0].id)
        //     })
        default:
            return state
    }
}

Posts.js

import React, { Component } from 'react';
import PostList from './PostList';
import Axios from '../Axios';
import {connect} from 'react-redux';
import { withRouter, Redirect} from 'react-router-dom';
import {DeletePost, GetPosts} from '../actions/';

const Styles = {
    myPaper:{
      margin: '20px 0px',
      padding:'20px'
    }
    , 
    wrapper:{
      padding:'0px 60px'
    }
}
class Posts extends Component {
    state = {
      posts: [],
      loading: true,
    }

  componentWillMount(){
    this.props.GetPosts();
    // renders an empty posts array
    console.log(this.props.posts);
  }

  onDelete = (id) => {
    Axios.post(`/api/posts/delete/${id}`);
    this.setState({
      posts: this.state.posts.filter(post => post.id !== id)
    })
  }


  render() {
    const {loading, posts} = this.state;
    if (!this.props.isAuthenticated) {
      return (<Redirect to='/signIn' />);
    }
    if(loading){
      return "loading..."
    }
    return (
      <div className="App" style={Styles.wrapper}>
        <h1> Posts </h1>
        {/* <PostList posts={this.props.posts}/> */}
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  isAuthenticated: state.user.isAuthenticated,
  // i know i have to use state.post.posts but i wanted to get an idea if the 
  // initialize state updated at all
  posts: state.post
})
const mapDispatchToProps = (dispatch, state) => ({
  // newPost: (post) => dispatch(newPost(post)),
  // DeletePost: (id) => dispatch( DeletePost(id))
  GetPosts: () => dispatch( GetPosts())
});
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Posts));

Answer 1

Your reducer is setting the posts state property:

case GET_POSTS:
            // console.log(action.data.data)
            return {...state, posts: action.data.data}

Your component is mapping the post state property to your component's posts property:

const mapStateToProps = (state) => ({
  isAuthenticated: state.user.isAuthenticated,
  // i know i have to use state.post.posts but i wanted to get an idea if the 
  // initialize state updated at all
  posts: state.post
})