如何转换 mapStateToProps 中的异步数据？

Question

• 我正在使用 firestoreConnect() 将我的数据从 firestore 同步到 redux。

• 我正在通过 state.firestore.ordered

从 firestore 获取一组员工对象

• 一个员工的形状是这样的：

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

• 在 mapStateToProps 中，我需要在 return 之前转换此数据的形状，并通过 props

  将其传递到组件中

  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: Cannot read 属性 'map' of undefined

• 我知道这是因为获取数据是异步的，并且在我映射 state.firestore.ordered.employees the employees 属性 === undefined 的时间点是不可迭代的

那么，我的问题是您如何使用异步数据进行这种数据转换？有没有办法暂停 mapStateToProps 的执行并等待数据在映射之前被 returned？

第一次发帖，如有不明白之处敬请见谅。

Answer 1

您的组件应该对基础数据的变化做出反应。所以你可以渲染这样的东西：

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
}

Answer 2

要快速使其正常工作，您只需执行以下操作：

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 }
}

然后，在您的组件中，您可以检查 rota 对象的 schedules 属性，如果它仍然未定义，则呈现一些内容以指示数据尚未加载。

不过，将如此复杂的逻辑放入 mapStateToProps 对我来说是一种反模式。您可以使用选择器模式让您的代码更有条理。