La idea general es que alguien hace clic en el botón, la acción obtiene datos del servidor y los envía. El estado se está actualizando y el contenido de la página está cambiando. La acción se ve exactamente así:

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

El reductor es bastante sencillo:

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

Y la página principal se ve así:

 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) => { return (<li key={post._id}>{post.date}</li>) }); this.setState({posts: posts}); } shouldComponentUpdate(nextState, nextProps){ console.log(nextProps.posts, nextState.posts); return true; } render(){ return( <div> {this.state.posts} <button onClick={this.handlePage.bind(this)}>change something</button> </div> ) } } function mapStateToProps(state){ return {posts: state.post} } export default connect(mapStateToProps, actions)(Home);

Estaba pensando que el estado se actualizará en componentWillReciveProps pero eso no está sucediendo. Los datos se obtendrán después de un tiempo, por lo que no puedo establecer el estado así. Alguna idea de cómo se hace esto ?