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

Question

The general idea is that someone clicks the button, action fetches data from server and dispatches it. The state is updating and the content on the page is changing. The action looks exacly like that:

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

Reducer is pretty straightforward:

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

And the main page is looking just like that:

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

I was thinking that the state will update in componentWillReciveProps but that is not happening. The data will be fetched after some time so i can't set state just like that. Any idea how to do this ?

Answer 1

for async actions, there are two possible ways:

1. an additional status flag
2. additional actions

The workflow would like:

1. Fetching data, dispatch an action, which sets status to 'fetching'
2. if fetching is successfull, dispatch an action, which sets status to 'success'
3. if fecthing fails, dispatch an action, which sets status to 'error'

Further reading: Redux :: Async actions

Answer 2

Edit: redux-saga is more appropriate than redux-thunk as it is a container for doing all your side effects.

You're performing an async action, so your dispatcher is 'dispatching' the action before the response of your request is received, that's why your store is not updating and hence your state too.

To do this successfully you have to provide some timeout to make sure the response is received before dispatching the action. Something like this:

 export function yourFunction(param) {
      return dispatch => {
        callApi(api_url, 'GET').then(res => {
           setTimeout(() => {
            dispatch(yourActionObject);
          }, 1000)
        }).catch(error => { console.log(error) })
      }
    }

But that timeout (1000 ms) may or may not work. Instead you can use a middleware like redux-thunk . It will take care of your timeout delay.

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met.

To use redux-thunk:

Installation

npm install --save redux-thunk

Then, to enable Redux Thunk, use applyMiddleware():

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

Then you can normally use your dispatch function without wrapping it in setTimeout.