What is the best way to dynamically update Navigation bar and side bar in React?

I created a layout component for my react app, and I wanted to dynamically update the side bar and navigation bar on route change.

I can use redux, but all of the state and methods will be available at all times, even if i don't need them.

I also looked at the new react context, but it has the same problem as redux.

With react router, it looks like i'm just mounting a new sidebar or navigation bar.

Is there a way to dynamically provide new state and methods to my layout component?

(replace the state with a different one, or multiple new once: apple --> orange)

React router looks like my best option, but I can do the same thing by just including the sidebar and navigation bar with each new route.

Dynamically adding links is not a problem, adding a button that affects the newly mounted component is the problem. The navigation bar and side bar lives in the parent component, so they need to know all of the states and methods.

Thanks,

Edit:

Example:

No problem, with link. I can just replace the link components with any other component with a switchComponet method.

These are all buttons. Now I need to add their methods and state to the Layout component. Is the app grows, more state and methods will need to be added to the top component.
I can place all of them in redux, but all the state and methods are always available. I probably have the wrong impression about redux, I'm thinking that it might take up a lot of resources, but I might be wrong.

What do you mean by 'but all the of the state and methods will be available at all time'? What is the problem?

– Matt Way
Sep 17 '18 at 23:35

What i mean by 'all of the state and methods will be available at all times' is: I will have to add them to the react store, with is always available.

– Ar-51
Sep 17 '18 at 23:42

I'm still not sure what the problem is. Why is something always available bad? I would suggest refining your question, and including some code if you can. Show what you want/expect, and why what you have is problematic.

– Matt Way
Sep 17 '18 at 23:46

I probably have the wrong impression about redux, I'm thinking that it might take up a lot of resources, but I might be wrong. I edited my original post.

– Ar-51
Sep 18 '18 at 0:07

You may need to consider the structure of the data you plan to store and manipulate in Redux or similar before anything else. It&#39;s difficult to answer without understanding your store, actions, and reducers. It seems like you are attempting to define your applications data structure based on navigation elements instead of the other way around. Can you share mock data and/or how you plan to manipulate that data, Redux or Context or anything in between. Yes Redux performance can be an issue but it depends on a lot of factors and there are ways to mitigate that.

– Alexander Staroselsky
Sep 18 '18 at 0:55

1 Answer
1

My guess is that by "state and methods" you mean the mapStateToProps and mapDispatchToProps arguments of the react-redux connect function in your layout component.

If that's the case then you have reasons to be concerned about putting the logic of all possible content of your layout in there.

I think your problem is that you're assuming that you have to connect only the top container to redux when it's not the case.

You can connect your layout component to deal with the nav and side bar and at the same time having components nested in your layout component and connected to redux with their own store keys (part of the store state) and actions.

This way you don't need to add all store states and action needed for each layout content. Each layout content will stay close to its logic.

That's actually one of the purposes of redux.

Thanks, I will try that. I was under the impression that you should only have one store.

– Ar-51
Sep 18 '18 at 0:21

you have one store, but a store can be split into different keys with different reducers for each key. The usage of these keys and the actions triggering mutations on the values of these keys by the reducers is at the discretion of the connected components

– remix23
Sep 18 '18 at 0:26

Will redux ever cause performance problem if you have to many reduces? Thanks,

– Ar-51
Sep 18 '18 at 0:36

I know it might be hard to let go of, but don't worry about performance until performance becomes a problem. More often than not, you won't have any issues, and if you do, it will be somewhere you didn't initially expect anyway. Spend ten times more time on easy to understand apis, a good user experience, and readable code.

– Matt Way
Sep 18 '18 at 2:12

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

搜尋此網誌

Dfyjkt