реактивный с Redux динамическим источником данных

Question

Я изучаю RN с Udemy: Полный курс React Native и Redux Стивена Гридера , и я создаю управляющее приложение с Firebase.

У меня есть функция подключения отreact-redux библиотека и mapStateToProps(), поэтому каждый раз, когда у меня происходят изменения в моих состояниях, я получаю их как реквизиты в своем компоненте.

Я создал действие для извлечения данных из базы данных Firebase и собираюсьчтобы вызвать его в componentWillMount(), но так как выборка данных является асинхронной задачей, я должен создать свой источник данных в componentWillReceiveProps().

Но инструктор сказал, что я должен вызвать свой createDataSource() в обоих componentWillMount() и componentWillReceiveProps().

Я не могу понять, почему !!если у меня есть какие-либо изменения в штатах (это список моих сотрудников), я получу их как реквизиты, поэтому я думаю, что достаточно позвонить только по номеру createDataSource() componentWillReceiveProps().

Может кто-нибудь заявить, чтоМне, пожалуйста?Есть ли какой-то особый случай, который я забываю обработать?

ОБНОВЛЕНИЕ

EmployeeActions.js:

export const employeesFetch = () => {
  const { currentUser } = firebase.auth();

  return dispatch => {
    firebase
      .database()
      .ref(`/users/${currentUser.uid}/employees`)
      .on("value", snapshot => {
        dispatch({ type: EMPLOYEES_FETCH_SUCCESS, payload: snapshot.val() });
      });
  };
};

EmployeeList.js:

  componentWillMount() {
    this.props.employeesFetch();

    this.createDataSource(this.props);
  }

  componentWillReceiveProps(nextProps) {
    this.createDataSource(nextProps);
  }

  createDataSource({ employees }) {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.dataSource = ds.cloneWithRows(employees);
  }

, поэтому я использую ListView, чтобы показать своих избранных сотрудников из Firebase!Будут ли у меня проблемы, если я просто использую createDataSource() в componentWillReceiveProps()?

Answer 1

Я также прошел тот же курс Udemy и занимался рефакторингом кода после того, как прочитал, что некоторые жизненные циклы React устарели и заменены другими.

это моя старая логика получения и обновления:

    state = { dataSource: [] }

    componentWillMount() {
      const { userCentres } = this.props;

      this.props.fetchCentres(userCentres);
      this.createDataSource(this.props);
    }

    componentWillReceiveProps(nextProps) {
      this.createDataSource(nextProps);
    }

    createDataSource({ centresList }) {
      this.setState({ dataSource: centresList });
    }

Я попытался заменить текущую логику с помощью static getDerivedStateFromProps, но у меня были проблемы с ней, так как я не мог использовать ключевое слово this в его пределах, что означает, что я не мог вызвать this.createDataSource(props)Я также прочитал «, вам, вероятно, не нужно производное состояние », и после этого решил, что гораздо лучше использовать getSnapshotBeforeUpdate и componentDidUpdate.

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

. Вот как я реорганизовал свой код:

      state = { dataSource: [] }

      componentDidMount() {
        const { userCentres } = this.props;

        this.props.fetchCentres(userCentres);
      }

      componentDidUpdate(prevProps, prevState, snapshot) {
        if (snapshot) {
          this.createDataSource(this.props);
        }
      }

      getSnapshotBeforeUpdate(prevProps) {
        if (prevProps.centresList !== this.props.centresList) {
          return true;
        }

        return null;
      }

      createDataSource({ centresList }) {
        this.setState({ dataSource: centresList });
      }

Этов итоге работал на меня, хотя я не уверен на 100%, что это лучший способ решения проблемы.Я также должен отметить, что это PureComponent.

Answer 2

Я также прошел курс Udemy, который вы упомянули, и прежде всего я должен сказать, что использование реквизитов componentWillReceiveProps () и componentWillMount () устарело и больше не должно использоваться.В новых проектах рекомендуется использовать статические getDerivedStateFromProps () и componentDidUpdate ().Официальные документы React предоставят вам дополнительную информацию по этой теме.

Но componentWillReceiveProps () вызывается только после завершения начального рендеринга, поэтому, если ваш компонент не получает реквизиты при создании экземпляра, необходимо выполнить настройку в componentWillMount ().

Редактировать Если вы хотите придерживаться новых передовых методов, это будет путь:

• Выполните любые экземпляры в конструкторе
• Асинхронная установка должна идти в componentDidMount ()
• Статический getDerivedStateFromProps () вызывается перед каждым рендерингом (первоначальный рендеринг и повторный рендеринг из-за обновлений)
• componentDidUpdate () вызывается на реквизитахобновляется после первоначального рендеринга