React Redux : redux에 연결 한 후 구성 요소가 업데이트되지 않았습니다.

Question

질문이 중복 될 수 있지만 mapStateToProps가 호출 된 후 구성 요소가 업데이트되지 않는 것 같습니다. 아래는 홈 컴포넌트 (클래스 선언 외부의 ofc) 안에 쓴 코드 조각입니다.

function mapStateToProps(state) { 
    const { tickets } = state; 
    console.tron.log(tickets) 
    if(!tickets.isLoading) { 
    return { 
     loading: false, 
     ticketsModel: tickets.chunkedData 
    } 
    } 
    return { 
    loading: true 
    } 
} 
export default connect(mapStateToProps)(Home); 

모든 것이 잘 작동하지만 소품에 대한 변경 내 구성 요소의 업데이트가 실행되지 않고있는 상태입니다.

추신 : 어떤 상태의 돌연변이가 일어나는지 확인했지만 그렇지 않았습니다. 문제는 분류되었습니다 나는

case RECEIVE_TICKETS : 
     return Object.assign({},state,{ 
     isLoading: false, 
     chunkedData: action.data.extractChunkedData(), 
     completeData: action.data.getCompleteData(), 
     }); 

편집

같은 새로운 상태를 재현. 바보는 나에게 당신은과 같이 더 간결하게 당신의 mapStateToProps를 작성할 수 componentWillReceiveProps

Answer 1

대신 componentWillMount 내부 업데이트를 확인했다 :

function mapStateToProps(state) { 
    const { isLoading, chunkedData } = state.tickets; 
    return { 
    loading: isLoading, 
    ticketsModel: chunkedData 
    }; 
} 
export default connect(mapStateToProps)(Home); 

당신의 mapStateToProps 기능을보고 한 후,하고 돌아 오는 로거, 문제는 가능성이 높습니다 구성 요소 자체에서 구성 요소에 this.props.loading을 렌더링하려면 true과 false이 있어야합니다.

또한 chunkedData 배열에 초기 상태가 없음을 알았습니다. tickets 개체의 초기 상태를 설정하면 개체를 빈 배열로 설정해야합니다. 당신의 감속기의

그래서 처음 몇 줄은 다음과 같이한다 : 당신은 소품이 componentWillReceiveProps 라이프 사이클 방식으로 변경 볼 수있는 경우

const tickets = (
    state = { 
    isLoading: false, 
    chunkedData: [], 
    // Need more info to know what would go in this object 
    completeData: {} 
    }, 
    action 
) => { 

참조. console.log() nextProps 수 있어야합니다, 해당 변경 될 때마다 변경됩니다.

여기에 라이프 사이클 방법에 대한 자세한 내용 : http://busypeoples.github.io/post/react-component-lifecycle/