Не удалось получить значения из Redux для реквизита

Question

Я не могу получить значения реквизита от Redux, я проверил в JS-файлах редукторы, хранилище, все работает нормально. Даже я могу видеть состояние, напечатанное правильно в функции console.log("MAPSTOSTATEPROPS", state) внутри mapsStateToProps ниже.

Но когда я даю this.props.posts для доступа к значениям, я их не получаю. Не уверен, где я тут не так делаю. Кто-нибудь может мне помочь?

posts.js:

class Posts extends Component {
  componentWillMount() {
    this.props.fetchPosts();
    **console.log(this.props.posts); // gives empty array result**
  }

  render() {
    return (
      <div>
        <h2>Posts</h2>
      </div>
    )
  }

  componentDidMount() {
    console.log("DID mount", this.props);
  }          
}

Posts.propTypes = {
  fetchPosts: PropTypes.func.isRequired,
  posts: PropTypes.array
}

const mapsStateToprops = (state) =>  {
  **console.log("MAPSTOSTATEPROPS", state)** // gives correct result from current state
  return {
    posts: state.items
  }
};    

export default connect(mapsStateToprops, {fetchPosts}) (Posts);

Answer 1

class Posts extends Component {

    /* use did mount method because all will-methods 
       are will be deprecated in nearest future  */
    componentDidMount() {

      /* on component mount you initiate async loading data to redux store */
      this.props.fetchPosts();
      /* right after async method you cannot expect to retrieve your data immediately so this.props.posts will return [] */ 
      console.log(this.props.posts);
    }

    render() {
    /* here you getting posts from props*/
    const { posts } = this.props;

    return (
      <div>
        <h2>Posts</h2>
        /* here you render posts. After async method will be completed 
           and dispatch action with retrieved data that will cause rerender 
           of component with new props */
        {posts.map(post => (<div>post.name</div>))}
      </div>
    )
      }
    }

    Posts.propTypes = {
        fetchPosts : PropTypes.func.isRequired,
        posts : PropTypes.array
    }

    const mapsStateToprops =  (state) =>  {
      /* first call will log an empty array of items, 
         but on second render after loading items to store they will 
         appear in component props */
      console.log("MAPSTOSTATEPROPS", state)
      return {
        posts : state.items || [];
      }

Answer 2

Это может быть связано с асинхронной природой метода fetchPost(). Попробуйте войти в нее внутри render() и обработать асинхронную природу с помощью обещаний.