Comments (12)
Version 1.0.2
is out with Redux support. Thanks for driving this effort!
You can get directly to the gist of how to make it work here:
https://github.com/jondot/react-flight/blob/master/examples/compos-redux/src/App.js
Note this is a new redux-centric sample. The trick now is to require your store context with the Flight
component, and it'll carry this context forward during deep rendering.
Flight.contextTypes = {
store: PropTypes.object,
}
Flight.childContextTypes = {
...Flight.childContextTypes,
store: PropTypes.object,
}
Hope this works for you!
from react-flight.
It sounds like store is part of a bigger redux or similar stack that you have?
from react-flight.
@jondot you're right. But the error is due to Flight (I guess new Director
and walk
is part of it). Even if I try with a simple div
, I cannot make it work.
from react-flight.
What react-flight
does as part of walk
is to walk the React component tree in a deep manner, try and render components, so that it can measure how it would layout in real life, so that it can capture animative properties (the React component tree isn't deeply rendered at the time of evaluation).
This means instantiating some of the components when needed. It may be that there is some kind of store setup that is done when trying to render in this way (that is out of the scope of react-flight).
What i'm wondering about is that you see that simple divs and rect aren't working. For sanity's sake - is the simple example working for you? (i.e. the vanilla react-flight
example).
from react-flight.
OK, I found out what's wrong. It seems that Flight.Frame
does not accept components connected to redux containers as children.
from react-flight.
And I assume everything is wrapped with Provider in your case right? (including Flight and Flight.Frames)
from react-flight.
Yes, Provider is wrapping the <App/>
.
from react-flight.
Got it. Generally integrating into a stateful app was out of scope for react-flight but I'm going to scaffold a redux app (god knows that takes time with all the options and configs :) ).
Then I'll see if it's possible to support stateful or redux apps and what's really the gist of the problem.
from react-flight.
Allright ! It's not really game-breaking though, the most important thing for now is to be aware of it :)
For a longer term, it would be awesome to have redux apps supported. 👍
from react-flight.
Took a couple of hours of drilling into React internals, and I finally came up with a solution that's not hacky, but hopefully supports enough use cases with Redux (the hacky solution involved extracting _context
from React internals, and would have worked better, but I preferred not going there).
Releasing a new version and pushing code in a bit!
from react-flight.
Awesome ! Thanks !
from react-flight.
Tidying up. Please reopen if more questions pop up 👍
from react-flight.
Related Issues (16)
- LICENSE not found HOT 1
- jQuery is not defined HOT 7
- [question] Will it work with React Native ? HOT 4
- Intergration with a Router (example) HOT 1
- Need better docs/examples HOT 2
- $.fn.velocity is undefined HOT 1
- In firefox there is some weird tear effect HOT 3
- Attempt jQuery removal HOT 2
- x
- Build error: [email protected] build:umd: `NODE_ENV=development webpack` HOT 4
- Transformation is not working
- react-flight.io not working HOT 1
- Error Command "start" not found HOT 2
- Can't yarn && yarn start in the examples folder HOT 2
- Invalid instructions in the README 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-flight.