Proof of concept of deferred props

[sergesemashko]

This a proof of concept for having deferred props.

Usage

Pass deferred props as a 2nd parameter to @asyncConnect:

@asyncConnect({...props}, {...deferredProps})

Under the hood

• Using server-side rendering:
  • Async props are loaded as usual by server
  • Deferred props are initialized with initial state {loading: false, loaded: false}
  • Client loads deferred props on componentDidMount
• Without server-side rendering:
  • Non-server environment loads deferred and default props all together

TODO:

• update the docs once the code is finalized

@sars, let me know what do you think

[sars]

@sergesemashko Thank you, for this PR, we actually discussed this approach here: https://github.com/erikras/react-redux-universal-hot-example/pull/872#discussion_r50781541 Is it what you are trying to solve?

To be honest, i don't really like this approach - I mean new static method and so on... trying to find more elegant solution....

[sergesemashko]

Thanks for the feedback, @sars. I understand. But I would like to know if there are more specific concerns about static methods, etc. or your vision how it would be better to implement this feature. Let's list points or concerns and work towards them. I would like to help to make deferred props happen in this project. Thanks

[krzysztofpniak]

Hey, any news when async props can be available here? Without them I do not really see benefit of having loading and loaded properties in store.

[sars]

@krzysztofpniak I'm working on v1.0.0 there will be several changes there including deferred props should be ready in 1-2 days

[sars]

@sergesemashko, @krzysztofpniak , take a look please: https://github.com/Rezonans/redux-async-connect/tree/v1

there is new interface for @asyncConnect decorator in this version.

Now you can use it like:

@asyncConnect([
  {key: 'lunch', promise: ({params, helpers}) => helpers.client.get('/lunches/' + params.lunchId), group: 'smth'}
])

and then in your client.js:

const component = (
  <Router render={(props) =>
        <ReduxAsyncConnect {...props} filter={item => item.group === 'smth'} helpers={{client}} />
      } history={browserHistory}>
    {getRoutes(store, client)}
  </Router>
);

and server.js:

loadOnServer({...renderProps, store, helpers: {client}}).then(() => {
  // ...
}

Does it works for you?

[sergesemashko]

hey @sars, sorry for the delay. I assume there should an additional filter for server:

loadOnServer({...renderProps, store, helpers: {client}}).then(() => {
  const appHTML = renderToString(
        <Provider store={store} key="provider">
          <ReduxAsyncConnect filter={item => item.group !== 'deferred'} {...renderProps} />
        </Provider>
      )
}

Right?

From the first look, this way of defining deferred props not too obvious and requires patching of the application with filter. It would make sense to make it more explicitly, I think.

Overall, it should work. Just curious, what are the other purposes of filters aside deferred props?

Thanks

[mmahalwy]

@sars is the purpose of the array suppose to be sequential? Also, is the static method going away?

[sars]

@mmahalwy no, all promises invokes simultaneously like in previous version static method still can be used, but it looks much inconvenient now, it's interface changed as well.