Соединениеact-redux не вызывает `mapStateToProps` для определенного синхронного действия, пока не будет отправлено последующее действие - PullRequest
0 голосов
/ 22 февраля 2020

У меня есть действие QUEUE_SWITCH_TO_BACKGROUND_LOCATION_SERVICES, которое обновляет состояние избыточности locationServices.pendingModeSwitch. Затем у меня есть логика c в подключенном компоненте didComponentUpdate, чтобы подобрать его, а затем запустить действие избыточного толчка, вызвав создателя действия processPendingServiceModeSwitch.

Проблема, с которой я столкнулся, заключается в том, что, хотя состояние избыточности успешно обновляется начальным действием QUEUE_SWITCH_TO_BACKGROUND_LOCATION_SERVICES, оно не вызывает функцию mapStateToProps компонента, что означает, что didComponentupdate не вызывается, и, как следствие, не является создателем действия processPendingServiceModeSwitch. Лишь после того, как последующее (не связанное) действие SOCKET_DISCONNECTED произойдет через несколько секунд, все решится. На этом этапе mapStateToProps запускается новым действием, вместе с componentDidUpdate и мой processPendingServiceModeSwitch создатель действия наконец получает вызов.

Если я удаляю вызов действия SOCKET_DISCONNECTED, тогда didComponentUpdate не будет вызван, ни мой processPendingServiceModeSwitch.

Я переопределил функцию areStatesEqual в опциях для функции connect(), чтобы проверить, не делаю ли я что-то глупое, такое как изменение состояния избыточности, но я нахожу, что даже это не вызывается, даже несмотря на то, что промежуточное программное обеспечение для записи логов ясно показывает, что состояние изменилось.

Мой редуктор выглядит так:

...
case QUEUE_SWITCH_TO_BACKGROUND_LOCATION_SERVICES: {
            return {
                ...state,
                pendingModeSwitch: state.locationMode !== "background" ? "background" : state.pendingModeSwitch
            };
        }
...

Мой mapStateToProps выглядит следующим образом :

const mapStateToProps = (state: RootState) => {
    console.log("location-services:mapStateToProps", state.locationServices, moment().format("HH:mm:ss.SSS"));
    return {
        locationMode: state.locationServices.locationMode,
        pendingModeSwitch: state.locationServices.pendingModeSwitch // this is not being called until the subsequent unrelated action finally causes the didComponentUpdate to fire.
    }
}

Я подключаюсь следующим образом:

const connector = connect(mapStateToProps, dispatchActions, undefined, {
    areStatesEqual: (nextState: RootState, prevState: RootState) => {
        console.log("react-redux:areStatesEqual: ARE REDUX STATES EQUAL???", nextState === prevState)
        return nextState === prevState;
    }
})

Подключенный компонент имеет componentDidUpdate:

    componentDidUpdate(prevProps: LocationServicesProps, prevState: LocationServicesState) {
        console.log("location-services:componentDidUpdate", moment().format("HH:mm:ss.SSS"));
        console.log("prevProps", prevProps);
        console.log("this.props", this.props);

        if(
            this.props.pendingModeSwitch !== null &&
            this.props.locationMode !== "transitioning" &&
            (
                prevProps.pendingModeSwitch !== this.props.pendingModeSwitch ||
                prevProps.locationMode === "transitioning" 
            )
        ) {
            this.props.processPendingServiceModeSwitch()
        }

И файлы console.logs выглядят так это:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...