React Redux: Компонент не обновляется после подключения к redux

Question

Вопрос может показаться излишним, но мой компонент, похоже, не обновляется после вызова mapStateToProps. Ниже приведен фрагмент кода, который я написал внутри своего домашнего компонента (из-за объявления класса).

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); 

Все работает нормально, но изменения в реквизитах не запускают обновление в моем компоненте.

PS: Я проверил, происходят ли какие-либо мутации состояния, но нет, это не так. Я воссоздал новое состояние как

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

EDIT: Проблема отсортирован. Глупый меня была проверка обновлений внутри componentWillMount вместо componentWillReceiveProps

Answer 1

Вы можете написать свои mapStateToProps более сжато, как так:

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

После просмотра вашей mapStateToProps функции, и регистратор Redux, ваша проблема, скорее всего, в самом компоненте. Если вы хотите отобразить this.props.loading в своем компоненте, вы должны увидеть true, а затем false.

Кроме того, я вижу, что у вашего исходного массива chunkedData нет начального состояния. Когда вы устанавливаете начальное состояние объекта tickets, вы должны установить его в пустой массив.

Так первые несколько строк вашего редуктора должны выглядеть следующим образом:

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

Смотрите, если вы можете увидеть реквизит изменить в методе componentWillReceiveProps жизненного цикла. Вы должны иметь возможность console.log() nextProps, которые будут меняться при изменении реквизита.

Подробнее о методах жизненного цикла здесь: http://busypeoples.github.io/post/react-component-lifecycle/