Question

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

我试图使用Reactjs和Redux来构建它，然后我开始考虑状态结构：

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

当我单击左侧菜单时，中间的内容应该更改（仅此部分）。

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

这很好。

现在在这种情况下，我需要一个表单来创建用户，以在成功保存后返回首页。更改路线是一个副作用，所以我认为我需要像传奇一样的东西。

我在网上找不到很好的例子，我认为我应该做的是： onSubmit->分派一个调度“保存”动作的传奇当动作完成时，如果一切都很好，则传奇会派遣“ save_complete”动作，然后作为副作用推动新路线。

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

谢谢

Answer 1

在保存时，您可以按照以下工作流程进行操作：

从您的{ type: "SAVE", form }派遣操作Form。
在redux内部处理它：
- 对此操作要求向您的后端发出任何请求
- 更新redux状态以反映上述操作的结果
将新状态分配到您的Form组件
以以下形式显示消息
从Redirect组件的react-router中渲染一个Form组件以触发主页重定向

对于任何将路由状态存储在redux内的解决方案，我都建议不要这样做，因为这会导致同步问题，并支持一种可以明确区分路由和本地应用程序状态的体系结构。

在Redirect的{{1}}组件中有docs

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

1 个答案: