Redux를 사용한 비동기 동작

Question

Redux 저장소에 연결된 React 구성 요소가 있습니다. 나는 수명주기 방법 인 componentWillMount에서 자원 (게시물)을 가져오고 있습니다.

componentWillMount() { 
    this.props.fetchPosts(); 
} 

구성 요소가 돌아 오는 저장소와 저장소에서 isFetching 및 posts을 얻기에 가입됩니다.

const mapStateToProps = (state) => { 
    return { 
    posts: getAllPosts(state), 
    isFetching: getIsFetchingPosts(state), 
    } 
} 

내가이 일을하고자하는 render 방법, 그래서 여전히 가져 오는 것 스피너를 보여주고 싶습니다.

render() { 
    if (this.props.isFetching) { 
    return <Spinner /> 
    } 

    return this.props.posts.map(post => <PostItem key={post.id}{...post}/>) 
} 

BUT I는 render 방법을 isFetching CONSOLE.LOG 경우 제 그러므로 false하고 true 최종적 false 나타낸다.

이 컨테이너가 처음 렌더링 될 때 isFetching 상태가 이미 true으로 설정되어 있으며 회 전자를 표시하는 것이 이상적입니다. 그런 일이 일어나기 위해 나는 어떤 변화가 필요합니까? 여기

사전에 감사 조치 작성자에 대한 코드 및 감속기

/*** Action Creator ***/ 
export const fetchPosts =() => (dispatch) => { 
    dispatch({ 
    type: REQUEST_POSTS, 
    }); 

    return axios({ 
    method: 'get', 
    url: `${API_URL}/posts`, 
    }) 
    .then(({data}) => { 
    dispatch({ 
     type: RECEIVE_POSTS, 
     payload: data.posts, 
    }) 
    }) 
    .catch((response) => { 
    // some error handling. 
    }); 
} 


/*** Reducers ***/ 
const initialState = { 
    isFetching: false, 
    allIds: [], 
    byId: {}, 
}; 

const isFetching = (state = initialState.isFetcthing, action) => { 
    switch (action.type) { 
    case REQUEST_POSTS: 
     return true; 
    case RECEIVE_POSTS: 
     return false; 
    default: 
     return state; 
    } 
} 

const allIds = (state = initialState.allIds, action) => { 
    switch (action.type) { 
    case RECEIVE_POSTS: 
     return action.payload.map(post => post.id); 
    default: 
     return state; 
    } 
} 

const byId = (state = initialState.byId, action) => { 
    switch (action.type) { 
    case RECEIVE_POSTS: 
     return action.payload.reduce((nextState, post) => { 
     nextState[post.id] = post; 
     return nextState; 
     }, {...state}); 
    default: 
     return state; 
    } 
} 

const posts = combineReducers({ 
    isFetching, 
    allIds, 
    byId, 
}); 

export default posts; 


/*** Selectors in 'posts.js' file ***/ 

export const getAllPosts = (state) => { 
    const { allId, byId } = state; 
    return allIds.map(id => byId[id]); 
} 

/*** rootReducer file ***/ 
import posts, * as fromPosts from './posts'; 


const rootReducer = combineReducers({ 
    posts, 
}) 

export default rootReducer; 

export const getAllPosts = (state) => { 
    return fromPosts.getAllPosts(state.posts); 
}; 

입니다!

Answer 1

일반적인 대답은 구현시 예상되는 동작입니다. isFetching 상태를 소품으로 매핑합니다. 여기에 무슨 일이 일어나고 있는지 : 그것은 false로 렌더링 있도록 isFetching 소품 값이 false 그래서 상태 트리에서 isFetching의 초기 값은, false입니다

1. .

2. isFetching을 으로 변경하는 작업을 상태 트리에 디스패치합니다. 이 새로운 상태는 새로운 isFetching 보조 값 true에 매핑되며, 이는 다시 렌더링을 유발하여 true으로 렌더링됩니다.

3. 상태 트리에서 isFetching을 다시 false으로 변경하는 다른 작업을 (비동기 적으로) 발송합니다. (2)와 동일하게 재 렌더링이 발생하며 isFetching은 false입니다.

평원 솔루션은 단순히이 true, false의 렌더링하려는 경우는 * 현재 구현하여 감속기의 초기 상태에 true에 isFetching을 설정하는 것입니다. 이 구현은이 구성 요소는 광범위한 질문 * 완전성에 대한 업데이 트 내가 돈 '이라고해야

:-) 여기에 대답하기에 충분한 상황이 아니라고이다의 디자인 수준에서 의미가 있는지 여부

render() 함수가 두 번 호출되는 경우, isFetching이 true,false으로 해결되었거나이 경우에 true,true,false으로 세 번 확인되었습니다.맵핑 된 isFetching 소품이 true ->true ->true에서 바뀌면 react-redux가 렌더링 렌더링을 최적화 할 수 있다고 생각합니다. 그러나이를 잘 모르는 경우 - 보내 주시면 고맙고 관심이 있습니다. 당신의 로깅 결과가 무엇인지 압니까? 확실히 두 인해 표준에 발생할 수있는 렌더링하는 DOM 레벨에서 어떤 경우

, 무슨 fetchPosts은 사실상 결과는 같은 어느 쪽이든