React-Redux Dashboard 应用结构

Question

我正在尝试构建一个仪表板应用程序，它应该具有： 顶部的状态栏（带有登录/注销按钮） 左侧的工具栏（带有菜单按钮）此工具栏可以折叠 中间的内容区域（路由应该呈现的地方）

我正在尝试使用 Reactjs 和 Redux 构建它，并开始考虑状态结构：

{
  ui: {
    menuBarIsCollapsed: true
  },
  users: {
    all: [{}, {}],
    currentUser: { username: '', email: '', ...}
  },
  ...(this users part is repeated for each menu)
}

当我点击左边的菜单时，中间的内容应该会改变（只有这部分）。

我所做的是构建一个包含工具栏和状态栏的组件，然后是一个包含部件的 div。

这很好用。

现在在这种情况下，我需要一个表单来创建用户，以便在成功保存后返回主页。 改变路线是一个副作用，所以我想我需要像 saga 这样的东西。

我在网上找不到一个很好的例子，我认为我应该做的是： onSubmit -> 发送一个发送“保存”操作的 saga 当动作完成时，如果一切正常，saga 会调度“save_complete”动作，然后作为副作用推送新路由。

一切都在我的脑海中很清楚，但我想不出如何编码。

谢谢

Answer 1

保存时，您可以遵循以下工作流程：

• 从您的Form 发送操作{ type: "SAVE", form }。
• 在redux内部处理：
  • 向您的后端发出此操作所需的任何请求
  • 更新redux 状态以反映上述操作的结果
• 将新状态发送到您的 Form 组件
• 在表单中显示消息
• 从react-router 渲染一个Redirect 组件，从此Form 组件触发主页重定向

我建议不要使用任何将路由状态存储在 redux 中的解决方案，因为这会导致同步它们的问题，并支持一种明确区分路由和本地应用程序状态的架构。

这里是docs 中的Redirect 组件react-router