React-Redux Dashboard application structure

Question

I'm trying to build a dashboard application which should have: a status bar on the top (with login/logout button) a toolbar on the left (with the menu buttons) this toolbar can be collapsed a content area in the middle (where the Routes should render)

I'm trying to build it using Reactjs and Redux and I started thinking about the state structure:

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

When I click on the menus on the left, the content in the middle should change (only this part).

What I did was building an Component which contains the toolbar and the status bar, and then a div which contains the part.

This works fine.

Now in this context, I need a form to create users, to go back to homepage after a successful save. Changing the route is a side effect, so I think I need something like saga.

I cannot find a good example of this online, what I think I should do is: onSubmit -> dispatch a saga that dispatches the "save" action when the action is completed, if everything is fine the saga dispatches the "save_complete" action and then, as a side effect pushes the new route.

Everything is quite clear in my head, but I can't think of how to code it.

Thanks

Answer 1

On save you can follow this workflow:

• Dispatch action { type: "SAVE", form } from your Form .
• Handle it inside redux :
  • Make any request to your backend this action requires
  • Update the redux state to reflect the result of the preceding actions
• Dispatch the new state to your Form component
• Display a message in the form
• render a Redirect component from react-router from this Form component to trigger homepage redirection

I would advise against any solution which stores the routing states inside redux as it would lead to issues in synchronizing them and favor an architecture which clearly makes a distinction between routing and the local application state.

Here the docs for the Redirect component in react-router