React template w/out Redux - how to handle global state? #337

New Issue

fergalmoran · 2025-08-09T17:15:54Z

fergalmoran commented

2025-08-09 17:15:54 +00:00

Originally created by @rgamage on 11/1/2017

I've been working with the react SPA template, without Redux, and I like it very much. However, when I tried to add a very simple top level App component, in which I could store some simple global state information, it became very complicated very quickly. I solved my initial problem of how to add this top level component: it is documented here in this stackoverflow question:

https://stackoverflow.com/questions/47027535/need-help-configuring-react-hot-loader

I was able to successfully pass state from my new App component, down to the Layout component. I was very happy, until I tried to then pass that state down to the child components (Counter, Fetchdata, etc.). Because these are Route components, it is not possible to pass props to them in the normal way. I've tried many complex work-arounds for this issue, with no satisfying outcome.

I am left with the sad conclusion that I can have an app with shared state, OR with routing, but not both. This seems pretty silly, and I'm sure I'm missing something but I've spent a lot of time struggling with this simple issue with no success.

I know I can use the React with Redux template, but I really want to wait on that until I feel it's justified. If all I want is for every component to know the username and if they're logged in, and maybe a few other global state variables, the Redux solution seems like overkill. Surely there must be a way to share global state with all components, easily, with routing and without Redux? I have read all the react documentation on Router, the react tutorials, and several Pluralsight tutorials. None of them seem to address this simple issue.

Thanks for any advice. Sorry this is a little off topic, but since this all started with this template, I thought perhaps there may be someone with answers here. Another struggle relating to this template is that all examples I have found are in .js, not .ts, and it really makes it difficult to move forward because of that difference.

Thanks again.

*Originally created by @rgamage on 11/1/2017* I've been working with the react SPA template, without Redux, and I like it very much. However, when I tried to add a very simple top level App component, in which I could store some simple global state information, it became very complicated very quickly. I solved my initial problem of how to add this top level component: it is documented here in this stackoverflow question: [https://stackoverflow.com/questions/47027535/need-help-configuring-react-hot-loader](https://stackoverflow.com/questions/47027535/need-help-configuring-react-hot-loader) I was able to successfully pass state from my new App component, down to the Layout component. I was very happy, until I tried to then pass that state down to the child components (Counter, Fetchdata, etc.). Because these are Route components, it is not possible to pass props to them in the normal way. I've tried many complex work-arounds for this issue, with no satisfying outcome. I am left with the sad conclusion that I can have an app with shared state, OR with routing, but not both. This seems pretty silly, and I'm sure I'm missing something but I've spent a lot of time struggling with this simple issue with no success. I know I can use the React with Redux template, but I really want to wait on that until I feel it's justified. If all I want is for every component to know the username and if they're logged in, and maybe a few other global state variables, the Redux solution seems like overkill. Surely there must be a way to share global state with all components, easily, with routing and without Redux? I have read all the react documentation on Router, the react tutorials, and several Pluralsight tutorials. None of them seem to address this simple issue. Thanks for any advice. Sorry this is a little off topic, but since this all started with this template, I thought perhaps there may be someone with answers here. Another struggle relating to this template is that all examples I have found are in .js, not .ts, and it really makes it difficult to move forward because of that difference. Thanks again.

fergalmoran closed this issue

2025-08-09 17:15:54 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#337