CODEWITHSUNDEEP
javascriptreactjsreduxredux-saga
sangio90
sangio90

Reputation: 179

React-Redux Dashboard application structure

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

Upvotes: 0

Views: 534

Answers (1)

adz5A
adz5A

Reputation: 2032

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

Upvotes: 1

Related Questions