#reactjs #react-redux #react-router #react-router-dom
#reactjs #react-redux #react-router #react-router-dom
Вопрос:
Как у всех дела:)
Похоже, что функция mapStateToProps, которая передается функции connect в качестве первого аргумента, вызывается до того, как монтируется фактический компонент или после изменения состояния хранилища Redux путем возврата нового простого объекта в редукторе.
Однако я обнаружил некоторое странное поведение между пакетами react-router-dom и react-redux.(вероятно, мне не хватает знаний об их использовании). Проблема, с которой я столкнулся, заключается в том, что, как указано в названии выше, Push по тому же маршруту, по которому вы сейчас работаете с history.push() просто отображает фактический компонент, переданный в connect(). Не определено, следует ли повторно отображать компонент или нет из mapStateToProps.
Вот версии пакета, которые я использую для этого проекта.
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"redux": "^4.0.5",
Вот код
class SomeComponent extends React.Component{
.
.
.
.
test = () => {
//this.props.test();
//Let's say you are currently in localhost:3000/
this.props.history.push('/');
};
render() {
console.log('[SomeComponent] is rendered');
<button onClick={this.test}>test</button>
}
}
const mapStateToProps = (state) => {
console.log('mapStateToProps is called in [SomeComponent]');
return {
someValue: state.someValue
};
};
const mapDispatchToProps = (dispatch) => {
return {
test: () => dispatch({ type: 'test' }),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(SomeComponent);
и я знаю, что когда вместо this.props.history.push(‘/’) в методе тестирования вызывается this.props.test(), который прокомментирован выше, а также диспетчеризация действий, функция-редуктор принимает этот поток, и нет совпадения с action.type.test, поэтому онвозвращает тот же ссылочный объект, что и раньше. Поэтому функция mapStateToProps для подписки на изменение хранилища Redux не будет запущена.
Я пытаюсь понять и искать это поведение весь день, но было трудно найти ответ, который я хотел.
Я был бы очень признателен, если бы вы, ребята, помогли с этой проблемой или с моими плохими знаниями.
Спасибо:) и извините за мой плохой английский:(
Комментарии:
1. history.push(‘/’) в основном просто добавляет запись в историю вашего браузера. Если вы находитесь на той же странице, то страница фактически не перезагружается, и ваш компонент не перемонтируется.
2. спасибо за ваш комментарий:) но каждый раз, когда я нажимаю на кнопку, я вижу в журнале сообщение «[SomeComponent] отображается», что означает, что каким-то образом этот компонент был повторно отображен каким-либо родительским компонентом или компонентом <Route>, который фактически импортирует результат connect(mapStateToProps, mapDispatchToProps) (SomeComponent)итак, я подумал, что цикл повторного рендеринга должен проходить через mapStateToProps, который определяет, должен ли фактический компонент повторно отображаться или нет. Но я не вижу в журнале сообщения «mapStateToProps вызывается в [SomeComponent]».