Я пытаюсь заставить избыточность работать в своем приложении, и у меня возникают проблемы с передачей изменений состояния подключенным компонентам. Функция 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, но мне трудно понять, что происходит в исходном коде. Я пытаюсь определить, где мой код не может сообщить об изменении состояния моему подключенному компоненту.





Интересно, проблематично ли обнаружение изменений в примитивах JavaScript (имеется в виду, что это может быть ограничение JavaScript, а не ограничение React/Redux). Можете ли вы изменить свой пример, чтобы вместо вашего state был числовой примитив, это был объект JavaScript с этим числовым примитивом в качестве свойства? Например:
Изменить состояние с state = 0 на state = { value: 0 }
Дайте мне знать, если это исправит это.
Если кому-то еще интересно, приведенный выше код действительно работает.
Я пробовал это с [email protected], [email protected] и [email protected].
Без изменения какого-либо кода моя проблема была фактически решена путем перехода на [email protected] (с сохранением [email protected] и [email protected]).
Не уверен, почему это исправило это, но это сделало. Просто пишу это на случай, если у других возникнут аналогичные проблемы.
Я отредактировал свой ответ, чтобы отразить то, что вы спросили (я полагаю), но, к сожалению, mapStateToProps все еще не вызывается