React-Redux: изменения состояния не вызывают mapStateToProps

Я пытаюсь заставить избыточность работать в своем приложении, и у меня возникают проблемы с передачей изменений состояния подключенным компонентам. Функция mapStateToProps вызывается только при инициализации и больше никогда.

Я прочитал страницу Поиск проблемы и бесчисленное количество сообщений на форумах и проблемах github. Я на 100% уверен, что не мутирую состояние. Я применил промежуточное ПО, которое сравнивает состояние до и после отправки действия, чтобы убедиться, что по крайней мере есть новая ссылка.

Вот базовое промежуточное программное обеспечение для обеспечения того, чтобы при отправке действия создавалась новая ссылка на магазин.

//Store Maker code to apply middleware
const logger = (store) => (next) => (action) => {

    var old_state = store.getState()

    var result = next(action)

    var new_state = store.getState()

    console.info("ENSURE FALSE", new_state === old_state)

    return result
}

export default () => {
    return applyMiddleware(logger)(createStore)(reducers)
}

Вот снимок того, где я создаю хранилище и передаю его дочернему компоненту.

//Parent Component code
const store = StoreMaker()

const unsubscribe = store.subscribe(() => {
    console.info("State Changed", store.getState())
})

...

class Plugin extends React.Component{

    ...

    render(){
        return (
            <Provider store = {store}>
                <ChildComponent {...this.props} />
            </Provider>
        )
    }
}

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

//Reducer code
export default (state = {}, action) => {
    if (action.type === "init"){
        return {
            ...state,
            test: 1
        }
    }
    else{
        return {
            ...state,
            test: 2
        }
    }
}

И, наконец, вот дочерний компонент

//Child Component code
class ChildComponent extends React.Component{
    constructor(props){
        super(props)
    }

    ...

    render(){
        return (
            this.props.test
        )
    }
}

const mapStateToProps = (state) => {
    console.info("Mapping state to props")
    return state
}

export default connect(mapStateToProps)(ChildComponent)

Насколько я понимаю, функция connect из react-redux подписывается на хранилище и обновляет свойства подключенного компонента при изменении через mapStateToProps. Однако, когда в моем магазине происходит изменение состояния, mapStateToProps не вызывается, и свойства подключенного компонента не меняются. Но подписка, которую я вручную закодировал в родительском компоненте только для регистрации состояния, срабатывает, что сбивает меня с толку, почему не был вызван mapStateToProps.

Я не могу понять, что происходит не так, и я почти идентично копирую рабочие примеры. Было бы здорово, если бы мне помогли.

Даже просто идея о том, как идти об отладке, будет действительно оценена. Я пытаюсь использовать Chrome Dev Tools, чтобы установить точку останова в коде реакции-редукции, который подписывается на изменения состояния и вызывает mapStateToProps, но мне трудно понять, что происходит в исходном коде. Я пытаюсь определить, где мой код не может сообщить об изменении состояния моему подключенному компоненту.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
391
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Интересно, проблематично ли обнаружение изменений в примитивах JavaScript (имеется в виду, что это может быть ограничение JavaScript, а не ограничение React/Redux). Можете ли вы изменить свой пример, чтобы вместо вашего state был числовой примитив, это был объект JavaScript с этим числовым примитивом в качестве свойства? Например:

Изменить состояние с state = 0 на state = { value: 0 }

Дайте мне знать, если это исправит это.

Я отредактировал свой ответ, чтобы отразить то, что вы спросили (я полагаю), но, к сожалению, mapStateToProps все еще не вызывается

Keaton 01.07.2019 18:10
Ответ принят как подходящий

Если кому-то еще интересно, приведенный выше код действительно работает.

Я пробовал это с [email protected], [email protected] и [email protected].

Без изменения какого-либо кода моя проблема была фактически решена путем перехода на [email protected] (с сохранением [email protected] и [email protected]).

Не уверен, почему это исправило это, но это сделало. Просто пишу это на случай, если у других возникнут аналогичные проблемы.

Другие вопросы по теме