Отправьте действие на componentDidMount (реакция/сокращение)

Ответ 1

Да, диспетчер действий на componentDidMount() в порядке, и даже рекомендуемая вещь, потому что это не замедлит первоначальный визуализатор интерфейса.

Поскольку функция запускается после того, как компонент изначально визуализировался, помните, что вы можете иметь какое-то время между моментами отображения компонента и момента получения данных из вызова api.

Ответ 2

Да, вы должны определенно использовать hook.config.

Типичным вариантом использования может быть:

• Компонент появляется на экране, например, таблица
• Запрос на сервер запускается для получения данных
• Показан счетчик/загрузчик для покрытия компонента
• данные возвращаются
• spinner удален и данные отображаются в таблице.

Я знаю его немного долго, но я некоторое время работал над этим типом проблемы, поэтому я подумал, что буду делиться следующим шаблоном;)

Когда компонент монтируется, срабатывает действие с данными извлечения. Значение "isFetching" в состоянии приложения определяет, отображается ли счетчик или нет (я думаю, что использовал "расширенный загрузчик" или некоторую такую ​​библиотеку)

export default class MyComponent extends React.Component {

  componentDidMount() {
    AppDispatcher.dispatch({
      type: ActionTypes.FETCH_DATA,
    });
  }

  render() {
    let isFetching = this.props.my.application.path.isFetching;
    return (
      <Loader show={isFetching} message={'loading'}>
        <div>
          My Component
        </div>
      </Loader>
    );
  }
}

Затем в хранилище FETCH_DATA запускает запрос:

class AppStore extends ReduceStore {

  //......

  reduce(state, action) {

    let imState = Immutable.fromJS(state);

    switch (action.type) {

      //......

      case ActionTypes.FETCH_DATA:
        doGetRequest('/url_to_service');
        break;

      //......
    }
    return imState.toJS();
  }
}

Запрос будет выглядеть примерно так:

function doGetRequest(endpoint, params = {}) {

  //request is some kind of AJAX library. In my case 'superagent'
  request.get(endpoint)
    .set('Accept','application/json')
    .query(params)
    .end(
      (err, res) => {
        if (res && res.ok) {
          receiveData(endpoint, "SUCCESS", res);
        } else {
          receiveData(endpoint, "FAIL");
    }});
}

По завершении он отправит другое действие.

function receiveData(endpoint, state, responseData) {
  AppDispatcher.dispatch(
    {
      type: ActionTypes.SERVER_RESPONSE,
      endpoint: endpoint,
      state: state,
      payload: responseData
    }
  );
}

Возвращаясь к хранилищу, второе действие поймано, и флаг isFetching установлен в значение false, затем обрабатываются данные приложения.

  reduce(state, action) {

    let imState = Immutable.fromJS(state);

    switch (action.type) {

      //......


      case ActionTypes.SERVER_RESPONSE: {

        imState = imState.setIn(['my','application','path', 'isFetching'], false)

        if (action.state == "SUCCESS") {
            //do something with the action.response data (via state update)
        }else if (action.state == "FAIL") {
            //maybe show an error message (via state update)
        }
        break;
      }
    }
    return imState.toJS();
  }
}

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

Надеюсь, что этот шаблон поможет:)

Ответ 3

Согласно официальной документации React, componentDidMount - это именно то, что нужно для этого:

componentDidMount() вызывается сразу после установки компонента. Инициализация, требующая узлов DOM, должна идти здесь. Если вам нужно загружать данные с удаленной конечной точки, это хорошее место для создания экземпляра сетевого запроса.

- Официальная документация по React для componentDidMount()

Ответ 4

При использовании маршрутов другим рекомендуемым способом отправки действия будет маршрут-метод "onEnter". Это делается для того, чтобы компонент не зависел от действий (или api-вызовов).

Я лично считаю, что оба метода (componentDidMount vs. onEnter) в порядке. Программисту остается выбрать, какое решение лучше всего подходит для его приложения.