javascript - 加载数据时如何构建规范化的 Redux Store

Question

我正在尝试创建一个列出书籍的 React/Redux 应用程序。每本书都有相关的书籍。我知道我应该像这样以某种规范化的方式构建我的 redux 存储:

{
  books: {
    'book1id': {
      title: 'Book 1',
      author: 'Author 1',
      relatedBooks: ['book2id', 'book3id']
    },
    'book2id': {
      title: 'Book 2',
      author: 'Author 2',
      relatedBooks: ['book1id']
    }
  }
}

并根据需要加载每本书。

问题是在哪里存储来自 API 请求的加载/错误数据？我的一些想法是为每本书创建一个对象，例如

books: {
  'book1id': {
    isLoading: false,
    error: null,
    book: {
      title: 'Book 1',
      ...
    }
  },
  ...
}

但这似乎稍微降低了状态的可读性/直观性。有没有更好的方法来构建状态？

Answer 1

我构建了我的 redux 存储，以便它包含一个用于我所有关系数据的实体对象，并且我将特定于页面或一组路由的内容存储在状态的不同部分。我的状态树可能看起来像这样:

const state = {
  entities: {
    books: {
      ...
    },
    authors: {
      ...
    },
    ...
  },
  booksPage: {
    isLoading: false
  }
} 

现在我正在跟踪我的关系状态，与我的 UI 组件的状态分开。我不建议尝试在单个实体中存储 isLoading 状态，因为该实体可能存在也可能不存在。如果您需要基于每个实体的更细粒度的加载/错误状态，那么您有几个选项而不是一组实体。第一个选项是保留一组当前正在加载的 ID。这不是一个非常实用的解决方案，因为您无法仅通过 ID 是否在集合中来跟踪成功或失败。

下一个更好的解决方案是保留一个从 ID 到状态对象的映射，其中包括单个实体是否正在加载、是否成功或加载失败以及错误是什么。

const state = {
  entities: {
    books: {
      ...
    },
    authors: {
      ...
    },
    ...
  },
  booksPage: {
    loading: {
      book1: {
        status: 'FAILED',
        error: 'Network request failed.'
      },
      book2: {
        status: 'SUCCESS',
      },
      book3: {,
        status: 'IN_PROGRESS'
      }
    }
  }
}

总而言之，我发现将您的关系状态分离到一个实体子对象中，同时让页面特定的状态部分对我来说效果很好。