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

Question

我无法想象应用程序状态。

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

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

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

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

但是，如果我浏览到Books Management，应用程序状态将如下所示：

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

如果我浏览到Movie Management，则：

{
    currentUser: { id: 9, userName: 'JUtah' },
    books: {}
    },
    movies: {
        1: { title: 'John Wick', star: 'Keanu Reeves' }
    },
    games: {}
}

等等。

它是否正确？我正在努力确定任何给定时间的应用程序状态。

标签： reactjs

Answer 1

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

假设您暂时不使用 Redux。状态管理完全取决于您。但是，尝试尽可能地构建您的组件并使用您真正需要它的状态。例如，考虑一下您所说的收藏夹应用程序。决定是，您想在同一个 UI 中显示所有收藏夹类别吗？如果是，那么您需要将它们全部保存在应用程序中的一个位置。然后，您将传递这些状态片段您的其他组件：书籍、电影等。book例如，书籍获取您的状态部分。他们不会有任何状态，你的应用程序有。在这里，App 是容器组件，其他是展示组件或哑组件。

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

但是，如果您不打算将它们全部显示在一个地方，那么您可以让您的组件拥有它们的状态。一旦用户进入 Book 组件，也许你只获取book数据然后根据它设置它的状态。正如您所看到的，有利也有弊，在第一种方法中，您正在执行一次获取并将数据分发到您的组件，在第二种方法中，您正在执行多次获取。所以，想想哪一个适合你。

我可以看到您删除了 Redux 标记，但是使用 Redux，您将在商店中拥有一个全局状态。同样，在某一时刻，您正在执行一些获取然后更新您的状态。然后，当组件需要来自状态的任何数据时，您将连接它们。但同样，您也可以在这里拥有容器/展示组件。一个容器连接到您的商店，然后将数据传递给您的组件。或者，您可以将多个组件连接到您的商店。当您检查示例时，您将看到有关这些示例的最佳实践。

如果您是新手，请不要想太多 :) 只需按照官方文档，阅读或观看一些好的教程并尝试编写您的应用程序即可。当你意识到你需要提取一些组件时，然后想想你是否需要那里的任何状态？

因此，一旦问题非常广泛，那么您会得到一个过于广泛的答案，一些文本块 :) 您看不到这么多这样的答案，因为在这里我们分享我们的具体问题。再说一次，不要用这么多的想法来膨胀自己。当你编码时，你会更好地理解它。