Почему не работает роутинг из-за action в React-Redux?

Question

[Username]

Добрый день, в реакт приложении у меня висит событие onLoad, которое берёт ширину и высоту родителя и делит на константное значение и через экшен диспатчится в хранилище.
И из-за этого не работает роутинг. В чём может быть дело?
Компонента
Экшен
Редьюсер

И зачем нужно писать экшен, если можно напрямую диспатч вызвать без посредников?

Answer 1

[Антон Спирин]

И из-за этого не работает роутинг.

withRouter(connect(...)(MainLayout));

И зачем нужно писать экшен, если можно напрямую диспатч вызвать без посредников?

Что именно не понятно? Зачем писать функцию? Или почему бы не импортировать store в каждый компонент вручную?
Первое, don't repeat yourself. Второе, сейчас компоненты вообще ничего не знают о store и о месте его хранения, в противном случае будут. Но вам никто не мешает делать как вам удобней.
Исбыточную конструкцию:

dispatch => ({
  onSetScale: (event) => {
    dispatch(setScale(event);
  }
})

Можно сократить до:

{
  onSetScale: setScale,
}

Я не передаю actions через connect, а вызываю так:

componentDidMount() {
  this.props.dispatch(action());
}

Плюс такого решения в том, что можно быстро перейти к месту объявления action. В больших проектах это экономит кучу времени.

Comments

[Username]

Почему я сделал вывод, что из-за этого не работает роутинг.
Если убрать коннект, то роутинг начинает работать.

[Username]

Такая конструкция не является избыточной?

dispatch => ({
  onSetNumber: (event) => {
    dispatch({ type: 'SET_NUMBER', payload: event.target.value });
  }
})

[Антон Спирин]

Username, проблема в том, что connect блокирует цепочку обновлений инициированную роутером, если входящие props не изменяются. Оберните компонент в withRouter:
withRouter(connect(...)(MainLayout));

withRouter будет передавать дополнительные props такие как history, match и location последние будут изменяться при смене url и connect будет обновлять компонент.

[Антон Спирин]

Username,

Такая конструкция не является избыточной?

Нет. Но лучше так не писать. Такой код трудно поддерживать, а в случае если вы захотите переиспользовать action его придется снова писать в другом метсе. Используйте action creators и храните их в отдельной директории:

const setNumber = event => ({ type: 'SET_NUMBER', payload: event.target.value });

Тогда ваш matchDispatchToProps:

{
  onSetNumber: setNumber,
}