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

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

1 голос
/ 28 июня 2019

Я пытаюсь заставить работать избыточность в моем приложении, и у меня возникают проблемы с передачей изменений состояния подключенным компонентам.Функция 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.log("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.log("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.log("Mapping state to props")
    return state
}

export default connect(mapStateToProps)(ChildComponent)

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

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

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

Ответы [ 2 ]

1 голос
/ 02 июля 2019

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

Я пробовал это с react@16.8.6, redux@4.0.1 и react-redux@6.0.0.

Без изменения какого-либо кода моя проблема была фактически решена путем переключения на react@16.5.2 (с сохранением redux@4.0.1 и react-redux@6.0.0).

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

1 голос
/ 01 июля 2019

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

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

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

...