Как правильно выполнять ajax-запросы в react-router?

Question

[R-Oscar]

Использую react-router v3

Предположим, что есть компонент, который осуществляет get-запросы на основе параметров, переданных в URL.

Где должен находиться непосредственно запрос? Если поместить его в componentDidMount() и componentDidUpdate(), последний будет срабатывать циклически (что вполне логично, так как результат запроса помещается в state компонента, что вызывает очередное обновление).

Также пытался использовать свойство onEnter у роута (документация), но nextState оказался иммутабельным объектом, поэтому результат с запроса в компонент не передается.

Answer 1

[Islam Ibakaev]

componentDidUpdate(prevProps){
    props.params.id !== prevProps.params.id && dispatch(fetchData());
}

Answer 2

[Иван]

Я использую вызов в componentWillMount(), либо в конструкторе. Ну и тут вам возможно помогут.

Comments

[R-Oscar]

Опять же, ссылаясь на со-автора redux, аякс-запросы в componentWillMount() и componentWillUpdate() не рекомендуется

[Иван]

R-Oscar:
componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore setting state in this method will not trigger a re-rendering. Avoid introducing any side-effects or subscriptions in this method.

This is the only lifecycle hook called on server rendering. Generally, we recommend using the constructor() instead.

[Иван]

R-Oscar:
componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

[Иван]

Это официальная дока, если что (перевод которой я кидал выше).

Answer 3

[Максим]

Запрос должен находиться либо в componentDidMount, либо в componentWillMount.
Зачем вам componentDidUpdate?

P.S. недавно меня спрашивали тоже самое, и если у вас проблема в том, что не "происходит" componentDidMount при изменении параметра роута, то здесь нужно использовать componentWIllReceiveProps(!)

Пример: <Route path='/articles/:id' >
Вы открываете браузер по URL адресу: /articles/1
У вас в componentDidMount происходит вызов (например: getArticles(this.props.params.id)

Затем вы кликая по ссылке, изменяете URL на /articles/2 и ожидаете что произойдет componentDidMount ? Нет, не произойдет, так как роут ('/articles/:id') не изменился, следовательно не было "демонтирования" и "примонтирования" компонента. Зато случилось "изменение props" в компоненте (того самого this.props.params.id), следовательно это можно обработать в componentWillReceiveProps

Comments

[R-Oscar]

Спасибо за ответ. Я прекрасно понимаю, что компонент не уничтожается, а апдейтится (поэтому и написал о componentDidUpdate(). И я бы поместил запрос в componentWillReceiveProps, но меня останавливают вот эти комментарии по поводу сайд-эффектов

[Максим]

R-Oscar: понял. Меня не останавливают, потому что как иначе запросить НОВЫЕ данные, если изменился URL-адрес, а не роут? Спросил Andrew ;)

[Максим]

R-Oscar: он ответил - componentDidUpdate - проверю у себя на проекте. А по вашему вопросу тогда позже может что появится... Либо можете тоже спросить в твитере напрямую)