请求完成后触发Redux异步操作。为什么？

我有我的异步行为的问题。我想在action fetchPosts（）被调用时将'loading'状态设置为true，并且当fetchPostsSuccess（）或fetchPostsFailiure（）时将'loading'状态设置为false。请求完成后触发Redux异步操作。为什么？

使用我当前的代码，当fetchPosts（）接收来自服务器的响应时，它的工作几乎没有问题，除了'正在加载'状态改变，我想在请求开始时改变这个状态。

下面是显示我的步骤的简单代码。我使用的是axios和redux-promise（https://github.com/acdlite/redux-promise）。

// actions 
export function fetchPosts() { 
    const request = axios.get(`${API_URL}/posts/`); 
    return { 
    type: 'FETCH_POSTS', 
    payload: request, 
    }; 
} 

export function fetchPostsSuccess(posts) { 
    return { 
    type: 'FETCH_POSTS_SUCCESS', 
    payload: posts, 
    }; 
} 

export function fetchPostsFailure(error) { 
    return { 
    type: 'FETCH_POSTS_FAILURE', 
    payload: error, 
    }; 
} 


// reducer 
const INITIAL_STATE = { 
    posts: [], 
    loading: false, 
    error: null, 
} 
const postsReducer = (state = INITIAL_STATE, action) => { 
    switch (action.type) { 
    case 'FETCH_POSTS': 
     return { ...state, loading: true, error: null }; 
    case 'FETCH_POSTS_SUCCESS': 
     return { ...state, posts: action.payload, loading: false }; 
    case 'FETCH_POSTS_FAILURE': 
     return { ...state, posts: [], loading: false, error: action.payload }; 
    default: 
     return state; 
    } 
} 

const rootReducer = combineReducers({ 
    postsList: postsReducer, 
}); 


// store 
function configureStore(initialState) { 
    return createStore(
    rootReducer, 
    applyMiddleware(
     promise, 
    ), 
); 
} 
const store = configureStore(); 


// simple Posts app 
class Posts extends Component { 
    componentWillMount() { 
    this.props.fetchPosts(); 
    } 

    render() { 
    const { posts, loading } = this.props.postsList; 
    return (
     <div> 
     {loading && <p>Loading...</p>} 
     <ul> 
      {posts.map(post => <li key={post.id}>{post.title}</li>)} 
     </ul> 
     </div> 
    ); 
    } 
} 

const mapStateToProps = state => ({ 
    postsList: state.postsList, 
}); 

const mapDispatchToProps = dispatch => ({ 
    fetchPosts: (params = {}) => { 
    dispatch(fetchPosts()) 
     .then((response) => { 
     if (!response.error) { 
      dispatch(fetchPostsSuccess(response.payload.data)); 
     } else { 
      dispatch(fetchPostsFailure(response.payload.data)); 
     } 
     }); 
    }, 
}); 


const PostsContainer = connect(mapStateToProps, mapDispatchToProps)(Posts); 

// main 
ReactDOM.render((
    <Provider store={store}> 
    <Router history={browserHistory}> 
     <Route path="posts" component={PostsContainer} /> 
    </Router> 
    </Provider> 
), document.getElementById('appRoot'));

有人能指导我什么，我做错了什么？

来源

2017-04-16 user7875611