redux重新选择关系数据的选择器

Question

选择器有2个参数，state和props，但是我们如何处理关系数据的选择器呢？

initialState = {
  department  :{ids:[1],byId:{name:'dep 1',id:1,parent:null}}
  sections    :{ids:[2],byId:{name:'section 1.1',id:2,parent:1}}
  subsections :{ids:[3],byId:{name:'subsection 1.1.1',id:3,parent:2}}
}

这里的部门是n（部分）和n（子部分）的祖父母

在<Department id="1" />我想选择部门1及其所有子女。

如何在没有将我需要的部门的ID传递给选择器的情况下编写这样的选择器？

Answer 1

您可以使用路由器（react-router）通过url段传递此类密钥，然后您可以访问所需的ID，即：

mapStateToProps(state, ownProps) {
  // then get access to id here
  console.log(ownProps.params.department_id);
}

Answer 2

在这里，您将找到一个实现-我希望-将回答您的第一个问题：“我们如何处理关系数据的选择器？”

import { createSelector } from "reselect";

const state = {
  departments: [{ id: 1, byId: { name: "dep 1", id: 1, parent: null } }],
  sections: [{ id: 2, byId: { name: "section 1.1", id: 2, parent: 1 } }],
  subsections: [
    {
      id: 3,
      byId: { name: "subsection 1.1.1", id: 3, parent: 2 }
    }
  ]
};

const clone = obj => JSON.parse(JSON.stringify(obj));

const bottomUp = (...levels) => 
  levels.reduce((children, parents) => {
    const p = clone(parents);
    const addToParent = child => {
      const parent = p.find(par => par.id === child.byId.parent);
      if (parent) {
        if (parent.children) {
          parent.children.push(child);
        } else {
          parent.children = [child];
        }
      }
    }
    children.forEach(addToParent);
    return p;
  });

const selectSubs = state => state.subsections;
const selectSecs = state => state.sections;
const selectDeps = state => state.departments;

const selectHierarchy = createSelector(
  selectSubs,
  selectSecs,
  selectDeps,
  bottomUp
);

console.log(selectHierarchy(state));

此新选择器将返回：

如您所见，由于我不完全了解您的商店结构，因此我对其进行了一些更改：每个域都变成一个数组，每个id都变成一个数字。

我希望它将对您有帮助... 干杯