javascript - Redux State 使用 Reselect 导出相关数据

Question

我已经坚持了一段时间。

这是我的 redux-state 的一部分

state: {

  teachers: [
    { teacherId: 'ttt1', teacherName: 'Susan', isCool: true, teachesAt: 'sss1'},
    { teacherId: 'ttt2', teacherName: 'Karen', isCool: false, teachesAt: 'sss2'},
    { teacherId: 'ttt3', teacherName: 'Bob', isCool: true, teachesAt: 'sss3'},
    { teacherId: 'ttt4', teacherName: 'Mike', isCool: false, teachesAt: 'sss1'},
  ],

  schools: [
    { schoolId: 'sss1', schoolName: 'Washington'},
    { schoolId: 'sss2', schoolName: 'Lincoln'},
    { schoolId: 'sss3', schoolName: 'Jefferson'},
  ],

  students: [
    { schoolIdEnrolled: 'sss1', studentName: 'Billy'},
    { schoolIdEnrolled: 'sss1', studentName: 'Steven'},
    { schoolIdEnrolled: 'sss2', studentName: 'Bobby'},
    { schoolIdEnrolled: 'sss3', studentName: 'Mikey'},
    { schoolIdEnrolled: 'sss3', studentName: 'Sally'},
    { schoolIdEnrolled: 'sss3', studentName: 'Cindy'},
    { schoolIdEnrolled: 'sss3', studentName: 'Mandy'},
  ],

  classes: [...],

}

任何人都可以想出一种方法，以便在我的渲染方法中React Component 我可以遍历我的学校并计算数量每所学校的 'coolTeachers' 和 'studentCount'？这是重新选择的用例？

我的表需要是这样的:

学校 ______# 很酷的老师_______学生

华盛顿__________1______________________2

林肯______________0________________________1

杰斐逊____________1______________________4

Answer 1

这是 Array.prototype.reduce 的经典用例:

const state = {
  teachers: [
    { teacherId: 'ttt1', teacherName: 'Susan', isCool: true, teachesAt: 'sss1'},
    { teacherId: 'ttt2', teacherName: 'Karen', isCool: false, teachesAt: 'sss2'},
    { teacherId: 'ttt3', teacherName: 'Bob', isCool: true, teachesAt: 'sss3'},
    { teacherId: 'ttt4', teacherName: 'Mike', isCool: false, teachesAt: 'sss1'},
  ],

  schools: [
    { schoolId: 'sss1', schoolName: 'Washington'},
    { schoolId: 'sss2', schoolName: 'Lincoln'},
    { schoolId: 'sss3', schoolName: 'Jefferson'},
  ],

  students: [
    { schoolIdEnrolled: 'sss1', studentName: 'Billy'},
    { schoolIdEnrolled: 'sss1', studentName: 'Steven'},
    { schoolIdEnrolled: 'sss2', studentName: 'Bobby'},
    { schoolIdEnrolled: 'sss3', studentName: 'Mikey'},
    { schoolIdEnrolled: 'sss3', studentName: 'Sally'},
    { schoolIdEnrolled: 'sss3', studentName: 'Cindy'},
    { schoolIdEnrolled: 'sss3', studentName: 'Mandy'},
  ],
}


const teachersReducer = (teachers, id) => {
  const numOfteachers = teachers.reduce((result, current) => {
    if (current.teachesAt === id && current.isCool) {
      result++;
    }
    return result;
  }, 0);
  return numOfteachers;
}

const studentsReducer = (students, id) => {
  const numOfstudents = students.reduce((result, current) => {
    if (current.schoolIdEnrolled === id) {
      result++;
    }
    return result;
  }, 0);
  return numOfstudents;
}


const resultData = state.schools.reduce((result, currentSchool) => {
  const currentId = currentSchool.schoolId;
  const numOfTeachers = teachersReducer(state.teachers, currentId);
  const numOfStudents = studentsReducer(state.students, currentId);
  return {
    ...result, 
    [currentSchool.schoolName]: {
        ...result[currentSchool],
        numOfTeachers,
        numOfStudents
    }
  }
}, {});

console.log(resultData);

您可以使用 reselect 包装方法，但请记住它只会缓存最后一个输入参数。