Общая идея заключается в том, что кто-то нажимает кнопку, действие извлекает данные с сервера и отправляет их. Состояние обновляется, а содержимое на странице меняется. Действие выглядит именно так:

export function getPosts(page){ return function(dispatch){ axios.get(`${ROOT_URL}/home?page=${page}`) .then(response ={amp}gt; { dispatch ({ type: FETCH_POSTS, payload: response.data }) }) .catch((error) ={amp}gt; { console.log(error) }); } } 

Редуктор довольно прост:

  export default function(state={}, action){ switch(action.type){ case FETCH_POSTS: return {posts: action.payload, ...state}; } return state; } 

И главная страница выглядит так:

  import React, { Component } from 'react'; import * as actions from '../actions'; import RequireAuth from './auth/require_auth'; import { connect } from 'react-redux'; import { compose } from 'redux'; class Home extends Component { constructor(props) { super(props); this.state = { posts: 'loading....', }; this.props.getPosts(); } handlePage(){ console.log(this.props); let page = 3; this.props.getPosts(); } componentWillReceiveProps(nextProps){ let posts = nextProps.posts.posts.map((post) ={amp}gt; { return ({amp}lt;li key={post._id}{amp}gt;{post.date}{amp}lt;/li{amp}gt;) }); this.setState({posts: posts}); } shouldComponentUpdate(nextState, nextProps){ console.log(nextProps.posts, nextState.posts); return true; } render(){ return( {amp}lt;div{amp}gt; {this.state.posts} {amp}lt;button onClick={this.handlePage.bind(this)}{amp}gt;change something{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; ) } } function mapStateToProps(state){ return {posts: state.post} } export default connect(mapStateToProps, actions)(Home); 

Я думал, что состояние будет обновляться в componentWillReciveProps, но этого не происходит. Данные будут получены через некоторое время, поэтому я не могу установить состояние просто так. Есть идеи как это сделать ?

для асинхронных действий есть два возможных пути:

  1. дополнительный флаг status
  2. дополнительные действия

Рабочий процесс хотел бы:

  1. Выборка данных, отправка действия, которое устанавливает status 'fetching'
  2. если загрузка прошла успешно, отправьте действие, которое устанавливает status 'success'
  3. если сбои не выполняются, отправьте действие, которое устанавливает status 'error'

Дальнейшее чтение: Redux :: Асинхронные действия