react + redux 中减速器的好策略？

Question

我正在使用 React + Redux 构建一个与 API 对话的 webapp，类似于 https://github.com/reactjs/redux/tree/master/examples/real-world 中的示例。

我的 API 返回艺术家、专辑和曲目列表，并允许查询他们的列表或单个艺术家、专辑或曲目。 （将其视为 /album、/artists 和 /tracks，以及附加的 /album/:id、/artist/:id 和 /tracks/:id）。

我实现了一个 API 中间件，并使用如上例中的 paginate reducer 来获取一个带有分页键的存储，用于检索专辑、艺术家和歌曲。

现在，我想实现单个调用来获取单个对象并显示它。但我不确定处理减速器的正确方法。我应该只用combineReducers 和额外的减速器artist、album 和track 来管理和存储这些项目吗？

另一个与减速器管理有关的问题是，在我当前的设置中，我存储了 3 个 paginate 减速器，每个包含 30 个项目。也就是我店里有将近100件商品，而同时展示最多30件，似乎效率不高。我做得对吗？

我寻找真实世界的开源示例，背后有一个相当大的 API，但找不到比上面的真实世界示例更详细的示例：/

谢谢！

Answer 1

我已经开始按照域对象类型将状态完全分段 - 所以艺术家专辑和曲目（以及一些用户界面状态，如“覆盖”、“错误消息”等）。然后我有一些重新选择的类，它们采用当前状态并将其处理成我的 React 组件可以使用的东西。

这为我提供了一个与数据转换（可独立测试）分开的简单数据存储（可使用您最喜欢的单元测试框架进行测试）。

重新选择的好处是它提供了一个很好的数据转换管道并缓存了结果 - 这样您就不必总是重新计算数据转换。这意味着您的 React 组件在不需要重新渲染时可以做得更好。

哦，在效率方面，从服务器存储大量缓存数据。我的策略是积极缓存——所以我不会从缓存中清除东西。但是，我有一个单独的对象，称为“控制器”，它监视 redux 模型并根据状态更改（如预加载数据）触发事件。如果它成为性能问题，我会在这里放置缓存失效代码。或者你可以让reducer来做缓存失效。

Answer 2

显然，在 React 中没有一条适合所有规则的规则。

然而，我在 GitHub 上的大多数样板文件和 React Web 应用程序中注意到的是，通常会为每个容器创建一个 reducer。

所以是的，为您的艺术家、专辑和曲目创建 reducer 是一种很好的做法，然后您可以使用 combineReducer 将它们组合成一个 rootReducer；这是一个例子。

import { combineReducers } from 'redux';
import artists from './artistsReducer';
import albums from './albumsReducer';
import tracks from './tracksReducer';

const rootReducer = combineReducers({
  artists,
  albums,
  tracks
});

export default rootReducer;

再次，此信息来自自我经验和使用 react-redux 观看 repos，如果我错了，请纠正我。

最好的问候，