|
// how I share state anywhere in the tree |
|
<Route render={({ match: { params } }) => ()}/> |
|
|
|
<Geolocation> |
|
{coords => ()} |
|
</Geolocation> |
|
|
|
<FirebaseRef path="/somewhere"> |
|
{(doc) => ()} |
|
</FirebaseRef> |
|
|
|
<Forecast onData={(forecast) => {}}/> |
|
<Forecast coords={coords}> |
|
{forecast => ()} |
|
</Forecast> |
|
|
|
<Fetch url="/somewhere" onLoad={(data) => {}}/> |
|
<Fetch url="/somewhere"> |
|
{data => ()} |
|
</Fetch> |
|
|
|
<UserPrefs> |
|
{prefs => ()} |
|
</UserPrefs> |
|
|
|
// AND NOW YOU GET COMPOSITION EXPLOSION! |
|
<Route path="/forecast/:days" render={({ match: { params }}) => ( |
|
<UserPrefs> |
|
{prefs => ( |
|
<Geolocation> |
|
{(coords) => ( |
|
<Forecast coords={coords} days={params.days}> |
|
{forecast => ( |
|
<ul> |
|
{forecast.days.map(day => ( |
|
<li>{ICONS[prefs.iconset][day.icon]}</li> |
|
))} |
|
</ul> |
|
)} |
|
</Forecast> |
|
)} |
|
</Geolocation> |
|
)} |
|
</UserPrefs> |
|
)}/> |
|
|
|
// "EW GROSS" |
|
// wrap it up |
|
const LocalForecast = ({ children, days }) => ( |
|
<Geolocation> |
|
{(coords) => ( |
|
<Forecast coords={coords} days={days}> |
|
{forecast => ( |
|
children(forecast) |
|
)} |
|
</Forecast> |
|
)} |
|
</Geolocation> |
|
) |
|
|
|
// Better? |
|
<Route path="/forecast/:days" render={({ match: { params }}) => ( |
|
<UserPrefs> |
|
{prefs => ( |
|
<LocalForecast days={params.days}> |
|
{forecast => ( |
|
<ul> |
|
{forecast.days.map(day => ( |
|
<li>{ICONS[prefs.iconset][day.icon]}</li> |
|
))} |
|
</ul> |
|
)} |
|
</LocalForecast> |
|
)} |
|
</UserPrefs> |
|
)}/> |
|
|
|
// Still unhappy? Wrap it up some more |
|
const ForecastIcons = ({ days }) => ( |
|
<UserPrefs> |
|
{prefs => ( |
|
<LocalForecast days={days}> |
|
{forecast => ( |
|
<ul> |
|
{forecast.days.map(day => ( |
|
<li>{ICONS[prefs.iconset][day.icon]}</li> |
|
))} |
|
</ul> |
|
)} |
|
</LocalForecast> |
|
)} |
|
</UserPrefs> |
|
) |
|
|
|
// How's that? |
|
<Route path="/forecast/:days" render={({ match: { params }}) => ( |
|
<ForecastIcons days={params.days}/> |
|
)}/> |
|
|
|
// anybody in the tree anywhere who needs the forecast: |
|
<Forecast> |
|
{forecast => ()} |
|
</Forecast> |
|
|
|
// or the user prefs |
|
<UserPrefs> |
|
{prefs => ()} |
|
</UserPrefs> |
|
|
|
// These components are basically: connect(mapStateToProps) + reducer |
|
// that can give you shared state access deeply w/o passing props 80 times. |
|
// mutations can come in as a function too |
|
<UserPrefs> |
|
{({ prefs, updatePref }) => ( |
|
<button onClick={() => { |
|
updatePref('food', 'tacos') |
|
}}>Prefer tacos</button> |
|
)} |
|
</UserPrefs> |