如何在多“页面”应用程序中处理应用程序状态？

Question

我在设想应用程序状态时遇到麻烦。

对于多页应用程序，每个页面应该只加载应用程序状态的一部分吗？

例如，假设我有一个应用程序可以管理我喜欢的东西，书，电影和游戏。这些域中的每一个都有自己的页面来管理它们。是否仅根据当前上下文中的需要加载应用程序状态的一部分的想法？

从概念上讲，我的应用程序状态看起来像这样。

new C

但是，如果我浏览到图书管理，则应用程序状态将如下所示：

{
    currentUser: { id: 9, userName: 'JUtah' },
    books: {},
    movies: {},
    games: {}
}

如果我浏览到电影管理，则此操作：

{
    currentUser: { id: 9, userName: 'JUtah' },
    books: {
        1: { title: 'Kung Fu for Kittens', author: 'Dr. Meowrtin Kibble' }
    },
    movies: {},
    games: {}
}

以此类推。

这是正确的吗？我正在努力确定在任何给定时间保持什么应用程序状态。

Answer 1

首先，React的本地状态和Redux的全局状态是不同的。

假设您暂时不使用Redux。国家管理完全取决于您。但是，请尝试构建尽可能纯的组件，并使用您真正需要它的状态。例如，考虑您所说的“收藏夹”应用程序。决定是，您是否要在同一UI中显示所有收藏夹类别？如果是，那么您需要将所有应用程序都放在一个位置。然后，您将这些状态块传递给您的其他组件：Book，Movie等。Book例如获得状态的book部分。他们将没有任何状态，您的应用程序则有。在这里，App是容器组件，其他是表示组件或哑组件。

您的数据真的很大吗？然后，您将考虑其他解决方案，例如不从API端点或数据库中获取所有解决方案，而是分部分获取，然后在客户端需要更多信息时更新状态。

但是，如果您不打算将所有组件都显示在一个位置，则可以让组件具有它们的状态。一旦用户转到Book组件，也许您仅获取book数据，然后根据该数据设置其状态。如您所见，有优点和缺点，在第一种方法中，您执行一次获取并将数据分发到组件，在第二种方法中，您执行多次获取。因此，请考虑哪个适合您。

我可以看到您删除了Redux标签，但是使用Redux，您将在商店中拥有一个全局状态。再一次，您需要进行一些提取然后更新您的状态。然后，当组件需要状态中的任何数据时，您将连接它们。但同样，您也可以在此处具有容器/表示组件。一个容器连接到您的商店，然后将数据传递到您的组件。或者，您可以将多个组件连接到商店。在查看示例时，您将看到有关这些示例的最佳实践。

如果您是新手，请不要想太多:)只需遵循官方文档，阅读或观看一些不错的教程并尝试编写您的应用程序。当意识到需要提取某些成分时，再考虑是否需要在那里的任何状态？

因此，一旦问题很广泛，那么您会得到一个范围太广的答案，其中有一些文本块:)您看不到这么多的答案，因为在这里我们共享我们的特定问题。再说一次，不要让太多的想法肿自己。在编写代码时，您会更好地理解它。