Странное неожиданное поведение с историей.push() из react-router-dom и connect() из react-redux

#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]».