Как изменить state при загрузке страницы в React — Redux — Router?

Question

[Andrey]

Пытаюсь обновлять заголовок при переходе между страницами. Заголовок страницы хранится в глобальном state, и выводится в компоненте Header . Пробовал так

const List = ({ onPageLoad }) => {		
		return (<div>{onPageLoad('Page list')}</div>);
}
const mapDispatchToProps = (dispatch) => ({
		onPageLoad: (title) => {
			dispatch({type:'SET_TITLE', title});
		}
});

заголовок обновляется, но ругается в консоли

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

как правильно его обновлять?

Answer 1

[Islam Ibakaev]

не совсем понятно, что рендерит этот компонент, если заголовок рендерится в другом компоненте? я просто верну null, а дальше ты сам разбирайся.

import React from 'react';
import { connect }  from 'react-redux';

class List extends React.Component {
    componentDidMount() {
        this.props.onPageLoad('Page list');
    }
    render() {
        return null;
    }
}

const mapDispatchToProps = (dispatch) => ({
    onPageLoad: (title) => {
      dispatch({type:'SET_TITLE', title});
    }
});

export default connect(null, mapDispatchToProps)(List);

Comments

[Andrey]

спасибо, такой вариант работает. Получается менять глобальный state можно только при использовании компонентов наследованных от React.Component ? Возможно ли сделать такую же операцию, если компонент объявлен как стрелочная функция "const List = (props) => {}"?

[Frozen Coder]

flx12: стрелочные функции обычно используются для рендеринга простых тупых компонентов, которые ничего не знают о store, не хранят состояние, а просто отображают что-то в зависимости от пришедших свыше пропсов. С хранилищем общается умный компонент (класс, а не функция, ибо функции умеют только рендерить), иногда называемый контейнером, который передает полученную из хранилища инфу вниз по дереву глупым потомкам через пропсы.

[Islam Ibakaev]

+1 к предыдущему комменту

[Islam Ibakaev]

забыл экспортировать компонент в прошлый раз, добавил export default.

Answer 2

[Хазрат Гаджикеримов]

в конструкторе контейнера вызвать нужное действие

Comments

[Andrey]

так у стрелочных функций нет конструктора

[Хазрат Гаджикеримов]

flx12: Почему стрелочная функция а не компонент или контейнер?

[Andrey]

hazratgs: это первое приложение, пробую разные варианты, смотрю плюсы и минусы