Comments (14)
Immutable doesn't solve this problem. React has to reconcile the tree, whether you use Immutable or something else.
from react-redux.
I'm not really sure what props you have troubles passing. Root
and Provider
are just plumbing: they look intimidating in a tiny app, but you only need to declare them once.
What problems do you have, after Root
is declared and uses Provider
? Let's imagine your app starts at CounterApp
.
from react-redux.
I'm not reporting it as a bug. It may be an improvement or something.
from react-redux.
I'm not saying I think you're reporting it as a bug :-).
I'm just trying to understand what could be improved. Can you suggest a different API?
from react-redux.
To clarify, <Provider>
is not there to pass props. It's there to make connect()
work no matter how deep it is in your app hierarchy. It uses undocumented React "context" feature to do that.
from react-redux.
I'm giving up. I just thought it can be simpler(like passing props directly), without understanding the implementation details. And probably I don't understand the true purpose behind <Provider>
And I turned my ideas into a "Redux clone for learning purpose" at https://github.com/mvc-works/actions-recorder (use gulp script
or npm i actions-recorder
to get JavaScript version if you need).
from react-redux.
And probably I don't understand the true purpose behind
The purpose is to expose store
on the React context. As I said, context is undocumented React feature so I understand the confusion.
Without <Provider>
or something similar, you can't connect()
components somewhere deep in the hierarchy. connect()
needs to read store
somehow so it can subscribe to it. <Provider>
puts store
in React context so connect()
can read it from there. If there was no provider, you'd have to either
a) pass the store
down via props through you whole application (very verbose);
b) export a singleton store
and let all components use it, but this doesn't work for apps rendering on server, because they want to have a store
instance per request.
from react-redux.
And probably I don't understand the true purpose behind
Same for me. Now, I understand, thanks.
from react-redux.
It makes sense. We even used a listenTo
mixin to to the job and it's so much code.
Personaly I still prefer the verbose way since it doesn't intrduce new terms or concepts. I can see the "very verbose" way in my own solution:
React.render(Page({
store: initial,
records: Immutable.List(),
pointer: -1
}), document.body);
recorder.subscribe(function (store, records, pointer) {
return React.render(Page({
store: store,
records: records,
pointer: pointer
}), document.body);
});
from react-redux.
Yes, and also always tendering from the top will be slower.
from react-redux.
Did you mean React.render
is slower than Component.setState()
?
from react-redux.
Yes, it's faster to setState
in the middle of the view hierarchy than React.render
at the top because this saves React work of figuring out that other components have not changed.
If most of your components implement shouldComponentUpdate
it's not such a problem, but it's still more performant to use setState
in the middle (via connect()
or a custom helper—but again, connect
is optimized so you should probably use it).
from react-redux.
I prefer Immutable data in such cases :)
from react-redux.
Fine.
from react-redux.
Related Issues (20)
- Redux is not working with Next 14 App routing HOT 2
- Add a debug check to `<Provider>` to throw a more detailed error when used in Next HOT 7
- Could not find react-redux context value; please ensure the component is wrapped in a <Provider> HOT 4
- Performance of useSyncExternalStore and React transitions HOT 5
- Disconnect from redux HOT 20
- Check why we no longer bail out of subscription checks when `store.getState()` hasn't changed HOT 1
- Rename `noopCheck` to `identityFunctionCheck` HOT 1
- Color visibility of some note HOT 5
- Unable to resolve module react-dom HOT 10
- Jest: Module import syntax error HOT 9
- Unable to resolve peer dependency react-native on [email protected] HOT 1
- TypeError: dispatcher.useSyncExternalStore is not a function HOT 1
- where development or production mode should be specified? HOT 7
- After some time useSelector stops doing re-renders HOT 8
- Provider properties for dev checks to be passed explicitly to new devModeChecks property HOT 7
- Getting Syntax error for react-redux when building project HOT 4
- Connect not working with detox envinronment HOT 1
- Getting issue in middleware of configureStore when update redux-toolkit to 2.0.1 HOT 1
- useDispatch() causing unexpected navigate back to previous screen HOT 3
- Single global store and two Provider occurs an error for microfrontend app HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-redux.