要求の完了後にRedux非同期アクションがトリガーされました。どうして？

私の非同期処理に問題があります。アクションfetchPostsSuccess（）またはfetchPostsFailiure（）が実行されているときに、fetchPosts（）アクションが呼び出され、 '読み込み'ステートがfalseに設定されているときに、 '読み込み'状態をtrueに設定したいとします。要求の完了後に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