Passing data through to loadProps

[zackify]

I have a use case where I need to get the request object inside of loadProps if I am on the server. Is there any way to pass down something through the AsyncProps component? How do you propose adding this?

I am doing renderProps.params.token = req.session.token above loadPropsOnServer for now.

[sars]

I am doing renderProps.params.token = req.session.token above loadPropsOnServer for now.

I believe it's right way

[ryanflorence]

There's definitely not a "right way" yet.

But ... mutating objects is the wrong way.

Maybe a route prop?

function createRootRoute(token, routes) {
  return <Route token={token} routes={routes} component={App}/>
}

[zackify]

I would have to wrap my routes in a function and pass them the request
object. would be more work to get the request object into them, but it
would feel "right". (I have them all in separate files and have the main
routes file import the child routes) But that would mean importing my
routes inside of the middleware, so that they get the request, which also
feels hacky, and pretty annoying.

I do also think mutating an object is a huge hack too... Hmm. I might be
overthinking this since I'm not at my computer though.
On Sat, Jan 16, 2016 at 18:09 Ryan Florence notifications@github.com
wrote:

There's definitely not a "right way" yet.

But ... mutating objects is the wrong way.

Maybe a route prop?

function createRootRoute(token, routes) {
return
}

—
Reply to this email directly or view it on GitHub
#43 (comment).

[ryanflorence]

But that would mean importing my routes inside of the middleware

Seems fine to me, they're just descriptors of your routes.

[sars]

@zackify @ryanflorence
What do you mean "mutating" ?
I thought params prop in AsyncProps exactly for such situations... May be i'm mistaken and it's only for params from routing.
I just consider params like any params that we can pass to loadProps function... routing params in particular

I used it to pass store there:

loadPropsOnServer({...renderProps, params: {...renderProps.params, store}}, (err, asyncProps) => {

The only thing... There could be naming collisions here... hm...

[zackify]

I need this on every route I have, it would be a lot nicer if it could be
passed down the same way params are. And by mutating I'm talking about
modifying the renderProps object.
On Sat, Jan 16, 2016 at 19:37 Rodion notifications@github.com wrote:

@zackify https://github.com/zackify @ryanflorence
https://github.com/ryanflorence
What do you mean "mutating" ?
I thought params prop in AsyncProps exactly for such situations... May be
i'm mistaken and it's only for params from routing.
I just consider params like any params that we can pass to loadProps
function... routing params in particular

—
Reply to this email directly or view it on GitHub
#43 (comment).

[sars]

@zackify got it...
yeah... we could send extra data something like:
export function loadPropsOnServer({ components, params, payload }, cb) {
and on client side just payload prop

and then invoke loadProps with this payload

Component.loadProps(params, payload, (error, props) => {

[zackify]

Yeah. Or params could just become an object with params as the required
key, and you could pass payload too.
On Sat, Jan 16, 2016 at 20:55 Rodion notifications@github.com wrote:

@zackify https://github.com/zackify got it...
yeah... we could send extra data something like:
export function loadPropsOnServer({ components, params, payload }, cb) {
and on client side just payload prop

on then invoke loadProps with this payload

Component.loadProps(params, payload, (error, props) => {

—
Reply to this email directly or view it on GitHub
#43 (comment).

[sars]

@zackify yeah... agree

[ryanflorence]

@zackify You're taking your app state and ramming it into router state, where it doesn't belong. You need your own abstraction for dealing with app state. Pass props, put the token on context, redux, etc.

But to be clear, you're mixing app and router state in the wrong direction. If you want them in the same place, take the router state and put it into your app state.

[zackify]

I know it is a rare use case. I haven't found a good way to get around the
issue I'm having right now.
On Sat, Jan 16, 2016 at 21:50 Ryan Florence notifications@github.com
wrote:

@zackify https://github.com/zackify You're taking your app state and
ramming it into router state, where it doesn't belong. You need your own
abstraction for dealing with app state. Pass props, put the token on
context, redux, etc.

But to be clear, you're mixing app and router state in the wrong direction.

—
Reply to this email directly or view it on GitHub
#43 (comment).

[ryanflorence]

Heh, it's not rare. We've been talking about this since the router first showed up.

If we make a few changes to Async Props, you could use the Router's createElement prop and pass the token to every element when the router creates them.

[zackify]

Oh okay, that would be cool!
On Sat, Jan 16, 2016 at 22:01 Ryan Florence notifications@github.com
wrote:

Heh, it's not rare. We've been talking about this since the router first
showed up.

If we make a few changes to Async Props, you could use the Router's
createElement prop and pass the token to every element when the router
creates them.

—
Reply to this email directly or view it on GitHub
#43 (comment).

[ryanflorence]

If you want to take a stab at it:

1. AsyncProps uses createElement here: https://github.com/rackt/async-props/blob/master/modules/AsyncProps.js#L208
2. You would need to check for props.createElement and use it somewhere in here: https://github.com/rackt/async-props/blob/master/modules/AsyncProps.js#L108-L113

Or something like that ...

[zackify]

Awesome, will try my hand at this tomorrow.

[ryanflorence]

Note the loadContext addition :)

loadPropsOnServer(renderProps, loadContext, cb)
// and
<AsyncProps {...renderProps} loadContext={loadContext}/>
// and finally
Component.loadProps = ({ params, loadContext }, cb) => {}

[zackify]

@ryanflorence haha I was just about to make a PR for this, that's exactly how I expected it to work. Thanks a lot