3 回答

• 16

  这让我想起了我是如何开始一个数据高度关系的项目 . 你对后端的做事方式还有太多考虑，但是你必须开始考虑更多的JS做事方式（对于某些人来说这是一个可怕的想法，当然） .

  1）状态中的规范化数据

  您已经很好地规范了数据，但实际上，它只是在某种程度上正常化了 . 我为什么这么说？

  ...
  books: [1]
  ...
  ...
  authorId: 1
  ...
  

  您在两个地方存储了相同的概念数据 . 这很容易变得不同步 . 例如，假设您从服务器收到新书 . 如果他们都有 authorId 为1，你还必须修改本书并将其添加到它！那是's a lot of extra work that doesn' t需要完成 . 如果没有完成，数据将不同步 .

  使用redux样式体系结构的一般经验法则永远不会存储（在状态中）您可以计算的内容 . 这包括这种关系，它很容易通过 authorId 来计算 .

  2）选择器中的非规范化数据

  我们提到在该州的规范化数据并不好 . 但是在选择器中对它进行非规范化是对的吗？嗯，确实如此 . 但问题是，它需要吗？我做了你现在正在做的同样的事情，让选择器基本上像后端ORM一样 . “我只是想打电话给 author.books 并拿到所有的书！”你可能在想 . 只需能够在你的React组件中循环 author.books 并渲染每本书，对吗？

  但是，您真的想要规范您所在州的每一项数据吗？ React doesn't need that . 实际上，它也会增加你的内存使用量 . 这是为什么？

  因为现在您将拥有相同 author 的两个副本，例如：

  const authors = [{
    id: 1,
    name: 'Jordan Enev',
    books: [1]
  }];
  

  和

  const authors = [{
    id: 1,
    name: 'Jordan Enev',
    books: [{
        id: 1,
        name: 'Book 1',
        category: 'Programming',
        authorId: 1
    }]
  }];
  

  所以 getHealthAuthorsWithBooksSelector 现在为每个作者创建一个新对象，该对象不会是该州的一个对象 === .

  这不错 . 但我会说这不理想 . 除了冗余（< - keyword）内存使用情况之外，最好对商店中的每个实体进行一次权威引用 . 现在，每个作者有两个实体在概念上是相同的，但是您的程序将它们视为完全不同的对象 .

  那么现在我们看看你的 mapStateToProps ：

  const mapStateToProps = state => ({
    books: getBooksSelector(state),
    authors: getAuthorsSelector(state),
    healthAuthors: getHealthAuthorsSelector(state),
    healthAuthorsWithBooks: getHealthAuthorsWithBooksSelector(state)
  });
  

  您基本上为组件提供了所有相同数据的3-4个不同副本 .

  思考解决方案

  首先，在我们开始制作新的选择器并使其变得快速和花哨之前，让我们做一个天真的解决方案 .

  const mapStateToProps = state => ({
    books: getBooksSelector(state),
    authors: getAuthors(state),
  });
  

  啊，这个组件真正需要的唯一数据！ books 和 authors . 使用其中的数据，它可以计算它需要的任何东西 .

  请注意，我将它从 getAuthorsSelector 更改为 getAuthors ？这是因为我们计算所需的所有数据都在 books 数组中，我们可以这样做拉着作者 id 我们有他们！

  请记住，我们只是简单地思考这个问题 . 所以， inside 组件，让我们的作者构建一本"index"书 .

  const { books, authors } = this.props;
  
  const healthBooksByAuthor = books.reduce((indexedBooks, book) => {
     if (book.category === 'Health') {
        if (!(book.authorId in indexedBooks)) {
           indexedBooks[book.authorId] = [];
        }
        indexedBooks[book.authorId].push(book);
     }
     return indexedBooks;
  }, {});
  

  我们如何使用它？

  const healthyAuthorIds = Object.keys(healthBooksByAuthor);
  
  ...
  healthyAuthorIds.map(authorId => {
      const author = authors.byIds[authorId];
  
      return (<li>{ author.name }
         <ul>
           { healthBooksByAuthor[authorId].map(book => <li>{ book.name }</li> }
         </ul>
      </li>);
  })
  ...
  

  等等

  But but but 你之前提到过记忆，'s why we didn'使用 getHealthAuthorsWithBooksSelector 去常规化东西，对吗？正确！但在这种情况下，我们不会占用带有冗余信息的内存 . 实际上，每个单独的实体 books 和 author 只是对商店中原始对象的引用！这意味着唯一占用的新内存是容器数组/对象本身，而不是它们中的实际项目 .

  我将它保存在上面的组件中，我将其提取为可重用的函数，该函数根据特定条件创建选择器 . 虽然，我有一个与你的复杂性相同的问题，因为你必须过滤一个特定的实体， through 另一个实体 . 哎呀！但仍然可行 .

  让我们将索引器函数提取为可重用的函数：

  const indexList = fieldsBy => list => {
   // so we don't have to create property keys inside the loop
    const indexedBase = fieldsBy.reduce((obj, field) => {
      obj[field] = {};
      return obj;
    }, {});
  
    return list.reduce(
      (indexedData, item) => {
        fieldsBy.forEach((field) => {
          const value = item[field];
  
          if (!(value in indexedData[field])) {
            indexedData[field][value] = [];
          }
  
          indexedData[field][value].push(item);
        });
  
        return indexedData;
      },
      indexedBase,
    );
  };
  

  现在这看起来像是一种怪物 . 但是我们必须使代码的某些部分变得复杂，这样我们才能使更多的部分变得干净 . 清洁怎么样？

  const getBooksIndexed = createSelector([getBooksSelector], indexList(['category', 'authorId']));
  const getBooksIndexedInCategory = category => createSelector([getBooksIndexed],
      booksIndexedBy => {
          return indexList(['authorId'])(booksIndexedBy.category[category])
      });
      // you can actually abstract this even more!
  
  ...
  later that day
  ...
  
  const mapStateToProps = state => ({
    booksIndexedBy: getBooksIndexedInCategory('Health')(state),
    authors: getAuthors(state),
  });
  
  ...
  const { booksIndexedBy, authors } = this.props;
  const healthyAuthorIds = Object.keys(booksIndexedBy.authorId);
  
  healthyAuthorIds.map(authorId => {
      const author = authors.byIds[authorId];
  
      return (<li>{ author.name }
         <ul>
           { healthBooksByAuthor[authorId].map(book => <li>{ book.name }</li> }
         </ul>
      </li>);
  })
  ...
  

  当然，这并不容易理解，因为它主要依赖于组合这些函数和选择器来构建数据表示，而不是重新规范化 .

  关键是：我们不打算用标准化数据重新创建状态副本 . 我们试图*创建该状态的索引表示（读取：引用），这些表示很容易被组件消化 .

  我在这里提供的索引是非常可重用的，但并非没有某些问题（我会让其他人都知道这些） . 我不指望你使用它，但我希望你从中学到这一点：而不是试图强迫你的选择器给你类似后端的，类似ORM的嵌套版本的数据，使用固有的链接能力使用您已有的工具获取数据：ID和对象引用 .

  这些原则甚至可以应用于您当前的选择器 . 而不是为每个可想到的数据组合创建一堆高度专业化的选择器... 1）创建基于某些参数为您创建选择器的函数2）创建可用作许多不同选择器的 resultFunc 的函数

  索引不适合所有人，我会让其他人建议其他方法 .

  回复于 2024-05-08T19:31:26+08:00
• 4

  这个问题的作者在这里！

  一年后，现在我要总结一下我的经历和想法 .

  我正在研究处理关系数据的两种可能方法：

  1.索引

  aaronofleonard，已经给了我们一个非常详细的答案here，其主要概念如下：

  我们不打算使用规范化数据重新创建状态副本 . 我们试图*创建该状态的索引表示（读取：引用），这些表示很容易被组件消化 .

  他提到，它非常适合这些例子 . 但重要的是要强调他的例子只为一对多关系创建索引（一本书有很多作者） . 所以我开始考虑这种方法如何适合我所有可能的要求：

  • 处理多对多案件 . 示例：One Book通过BookStore有许多作者 .

  • 处理深层过滤 . 示例：获取 Health 类别中的所有书籍，其中至少作者来自特定国家/地区 . 现在想象一下，如果我们有更多嵌套级别的实体 .

  当然这是可行的，但正如你所看到的那样，事情很快就会变得严肃起来 .

  如果您对使用Indexing管理此类复杂性感到满意，那么请确保您有足够的设计时间来创建选择器和组合索引实用程序 .

  我继续寻找解决方案，因为创建这样的索引实用程序看起来完全超出了项目的范围 . 这更像是创建第三方库 .

  所以我决定试试Redux-ORM库 .

  2. Redux-ORM

  一个小而简单且不可变的ORM，用于管理Redux存储中的关系数据 .

  没有冗长，这就是我如何管理所有需求，只是使用库：

  // Handing many-to-many case.
  const getBooks = createSelector({ Book } => {
    return Books.all().toModelArray()
     .map( book => ({ 
       book: book.ref,
       authors: book.authors.toRefArray()
     })
  })
  
  // Handling Deep filtration.
  // Keep in mind here you can pass parameters, instead of hardcoding the filtration criteria.
  const getFilteredBooks = createSelector({ Book } => {
    return Books.all().toModelArray()
     .filter( book => {
       const authors = book.authors.toModelArray()
       const hasAuthorInCountry = authors.filter(a => a.country.name === 'Bulgaria').length
  
       return book.category.type === 'Health' && hasAuthorInCountry
     })
     .map( book => ({ 
       book: book.ref,
       authors: book.authors.toRefArray()
     })
  })
  

  如您所见 - 库为我们处理所有关系，我们可以轻松访问所有子实体并执行复杂的计算 .

  同样使用 .ref 我们返回实体Store 's reference, instead of creating a new object copy (you'重新担心内存） .

  所以有这种类型的选择器我的流程如下：

  • 容器组件通过API获取数据 .

  • 选择器仅获取所需的数据片段 .

  • 渲染Presentation组件 .

  然而，听起来没有什么是完美的 . Redux-ORM以非常容易使用的方式处理关系操作，如查询，过滤等 . 凉！

  但是当我们讨论选择器的可重用性，组合，扩展等等时 - 它不是一个Redux-ORM问题，而是 reselect 库本身及其工作方式 . Here我们讨论了这个话题 .

  结论（个人）

  对于更简单的关系项目，我会尝试使用索引方法 .

  否则，我会坚持使用Redux-ORM，就像我在App中使用它一样，我问了一个问题 . 在那里，我有70个实体，仍然在计算！

  回复于 2024-05-08T19:31:26+08:00
• 3

  当您使用其他命名选择器（如 getHealthAuthorsWithBooksSelector ，...）启动"overloading"选择器（如 getHealthAuthorsSelector ）时，您最终可能会遇到类似 getHealthAuthorsWithBooksWithRelatedBooksSelector 等的问题 .

  这是不可持续的 . 我建议你坚持使用高级别的（即 getHealthAuthorsSelector ）并使用一种机制，以便他们的书籍和相关书籍等始终可用 .

  您可以使用TypeScript并将 author.books 转换为getter，或仅使用convenience函数在需要时从商店获取书籍 . 通过操作，您可以将来自存储的get和来自db的fetch直接显示（可能）过时的数据，并在从数据库中检索数据后让Redux / React处理可视更新 .

  我没有听说过这个Reselect，但似乎可能是在一个地方安装各种过滤器以避免在组件中重复代码的好方法 .
  虽然它们很简单，但它们也很容易测试 . 业务/域逻辑测试通常是一个（非常好）的好主意，特别是当您自己不是域专家时 .

  还要记住，将多个实体连接到新的实体是不时有用的，例如展平实体，以便它们可以轻松绑定到网格控件 .

  回复于 2024-05-08T19:31:26+08:00