Как преобразовать асинхронные данные в mapStateToProps?

Question

• Я использую firestoreConnect () для синхронизации моих данных из firestore с redux.

• Я получаю массив объектов сотрудников из пожарного магазина через state.firestore.ordered

• сотрудник имеет такую ​​форму:

  {
    id: 'XtVe567...',
    name: {
      first: 'John',
      last: 'Doe'
    }
  }
  

• В mapStateToProps мне нужно преобразовать форму этих данных, прежде чем я верну их и передать в компонент через реквизиты

  function mapStateToProps(state) {
  
    const schedules = state.firestore.ordered.employees
      .map(employee => ({
        id: employee.id,
        name: {
          first: employee.name.first,
          last: employee.name.last
        },
        schedule: [null, null, null, null, null, null, null]
      }));
  
    const rota = {
     id: null,
     date: moment(),
     notes: null,
     events: [null, null, null, null, null, null, null],
     published: null,
     body: schedules
    };
  
    return {rota}
  }
  

• Это приводит к: TypeError: Невозможно прочитать свойство 'map' из неопределенного

• Я знаю, что это происходит потому, что выборка данных происходит асинхронно и в тот момент, когда я сопоставляю state.firestore.ordered.employeesсвойство сотрудников === undefined, которое не может быть повторено

Итак, мой вопрос заключается в том, как сделать такой преобразование данных с асинхронными данными?Можно ли как-нибудь приостановить выполнение mapStateToProps и дождаться возвращения данных ПЕРЕД сопоставлением?

Спасибо и заранее извините, если этот вопрос неразборчив, я впервые пишу.

Answer 1

Чтобы быстро заставить его работать, вы можете просто сделать что-то вроде:

function mapStateToProps(state) {

    const employees = state.firestore.ordered.employees;

    const schedules = employees
        ? employees.map(employee => ({
            id: employee.id,
            name: {
                first: employee.name.first,
                last: employee.name.last
            },
            schedule: [null, null, null, null, null, null, null]
        }))
        : undefined;

    const rota = {
        id: null,
        date: moment(),
        notes: null,
        events: [null, null, null, null, null, null, null],
        published: null,
        body: schedules
    };

    return { rota }
}

Затем в вашем компоненте вы можете проверить наличие атрибутов расписаний объекта ротации и, если он все еще не определен, отобразить что-то, что покажет, что данные еще не загружены.

Тем не менее, введение такой сложной логики в mapStateToProps является для меня антипаттерном. Вы можете использовать шаблон селектора, чтобы сделать ваш код более организованным.

Answer 2

Ваш компонент должен реагировать на изменения в базовых данных.Таким образом, вы можете сделать что-то вроде этого:

getSchedules(emps) {
 return emps.map(employee => <SomeEmployeeRenderingComponent emp={employee} /> );
}
render() {
  return (
   <div>{this.getSchedules(this.props.employees).bind(this)}</div>
  )
}

и mapstatetoprops становится:

function mapStateToProps(state) {

  const rota = {
   id: null,
   date: moment(),
   notes: null,
   events: [null, null, null, null, null, null, null],
   published: null,
   employees: state.firestore.ordered.employees
  };

  return rota
}