요청 완료 후 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