Javascript React Redux仪表板应用程序结构

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

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

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

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

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

这个很好用

现在在这个上下文中，我需要一个表单来创建用户，在成功保存后返回主页。 改变路线是一个副作用，所以我想我需要一些类似传奇的东西

我在网上找不到这方面的好例子，我认为我应该做的是： onSubmit->dispatch一个调度“save”操作的传奇 当动作完成时，如果一切正常，传奇将发送“保存完成”动作，然后作为副作用推动新路线

我脑子里的一切都很清楚，但我想不出如何编写代码

---

感谢您在保存时遵循以下工作流程：

• 从您的

  表单

  发送操作

  {键入：“保存”，表单}

• 在redux内部处理它：
  • 向后端发出此操作所需的任何请求
  • 更新

    redux

    状态以反映前面操作的结果
• 将新状态分派到

  表单

  组件
• 在表单中显示消息
• 从

  react router

  中呈现

  重定向

  组件，从该

  表单

  组件触发主页重定向

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

---

这里是

react router

中的

重定向

组件的示例，谢谢，所以您不建议使用saga进行ajax调用吗？我使用了一个中间件，它允许我在actionCreator中构建请求，并将其作为有效负载传递给要调度的操作，中间件执行请求并将响应传递给reducer。我不确定这是否是一个好主意，我认为redux文档在todo演示应用程序中有一个路由和redux的例子。基本上，路由只用于传递有关如何表示数据的信息。实际的数据处理和获取是在redux内部处理的。请看这个问题。我想说，你所描述的模式是相当普遍的。特别是在严格类型化的上下文中，您可以确保调度的操作实际匹配您使用的任何Ajax api（fetch，axios）