Javascript 在react redux中异步操作后更新状态

一般的想法是，有人单击按钮，action从服务器获取数据并发送数据。状态正在更新，页面上的内容正在更改。该操作看起来非常像：

     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)
          });
    }
    }

    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);

减速器非常简单：

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

主页看起来就像这样：

     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)
          });
    }
    }

    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);

import React，{Component}来自'React'；
将*作为动作从“../actions”导入；
从“/auth/require_auth”导入RequireAuth；
从'react redux'导入{connect}；
从'redux'导入{compose}；
类Home扩展组件{
建造师（道具）{
超级（道具）；
此.state={
帖子：“加载…”，
};
this.props.getPosts（）；
}  
手页{
console.log（this.props）；
设page=3；
this.props.getPosts（）；
}
组件将接收道具（下一步）{
让posts=nextProps.posts.posts.map（（post）=>{
返回（
{post.date}
）
});
this.setState（{posts:posts}）；
}
应更新组件（下一个状态，下一个操作）{
log（nextrops.posts，nextState.posts）；
返回true；
}
render（）{
返回(
{this.state.posts}
换东西
)
}
}
函数MapStateTops（状态）{
返回{posts:state.post}
}
导出默认连接（MapStateTops，actions）（主）；

---

我在想状态将在ComponentWillReceiveProps中更新，但这并没有发生。数据将在一段时间后提取，所以我不能像那样设置状态。你知道怎么做吗？

对于异步操作，有两种可能的方法：

附加的

状态

标志

额外行动

工作流程如下所示：

获取数据，分派一个操作，该操作将

状态设置为
“获取”

如果获取成功，则发送一个操作，该操作将

状态设置为
成功

如果fecthing失败，则调度一个操作，该操作将

状态设置为
“错误”

---

进一步阅读：

谢谢你，伙计！那太好了！我可以整天阅读React，但我从不喜欢Redux文档，但我肯定会更经常地阅读它们：）很高兴我能帮上忙：）