javascript - Redux 或简单的 React 来处理导航

Question

我对 React 和 Redux 还很陌生，目前我正试图了解如何通过 UI 共享状态。

我有一个非常简单的用例。

想象一个具有三列的容器：

1. 带有四个按钮的左侧菜单
2. 中心内容部分
3. 一个包含其他内容的正确容器

当我单击四个按钮之一时，我希望发生三件事：

1. 按钮上的类已更新，因此它具有边框
2. 其他按钮上的类已更新，因此如果在删除其边框类之前已单击它们
3. 更新了中间部分的内容。此内容需要从后端（Django Rest）获取数据

以下是我的问题：

1. 我应该将此交互分为仅 UI 关注点和数据驱动关注点还是使用单一状态处理两者？
2. 因为按钮共享一个父组件，但它们不与中央组件共享，如果我不想在容器的最顶层定义状态，我会更好地使用 Redux 吗？
3. 因为我是新手，而且 Hooks 似乎是要走的路，所以我尝试使用钩子而不是类，分离组件和容器是否仍然有意义？

标签： javascriptreactjsreduxreact-hooks

Answer 1

你可以使用 react-router-dom 库来实现你想要的。对于您的左侧菜单，您可以在 css 中创建活动类，然后检查具有location.pathnamereact-router-dom 属性的当前路由，如果是该按钮，则为其设置活动类。对于您的主要部分，您可以在 useEffect 挂钩中获取数据。我认为将数据和 UI 分开很好，但对于按钮，我说的很好。您可以将数据存储在主要部分的 redux 中。