Question

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

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

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

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

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

我在寻找具有相当大的API的真实世界开源示例，但是无法比上面的真实示例更详细地说明示例：/

谢谢！

Answer 1

显然，在React中没有一条规则适用于所有规则。

然而，我在大多数样板上注意到并在GitHub上反应网络应用程序的是通常为每个容器创建一个减速器。

所以是的，为你的艺术家，专辑和曲目创建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观看回购，如果我错了，请纠正我。

最诚挚的问候，

Answer 2

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

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

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

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

减速器的反应+减少的良好策略？

2 个答案: