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

adz5A · Accepted Answer · 2018-11-09 15:48:20Z

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

answered Nov 9, 2018 at 15:48

adz5A

2,03211 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sangio90 Over a year ago

Thanks, so you would not advise using saga for ajax calls? I've used a middleware that allows me to build the request in the actionCreator and pass it as payload to the action to be dispatched, the middleware executes the request and passes the response to the reducer. I'm not sure whether this is a good idea or not

adz5A Over a year ago

I think that redux docs have an example in the todo demo app of routing and redux. basically routing is only used to convey information about how the data is to be represented. Actual data handling and fetching is handled inside redux. see this question also stackoverflow.com/questions/51734197/…. The pattern you describe is fairly common I would say. especially in strictly typed context where you can ensure that dispatched actions actually match whatever Ajax api (fetch, axios) you use

Collectives™ on Stack Overflow

React-Redux Dashboard application structure

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related