makeomatic / redux-connect

Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React
MIT License
549 stars 66 forks source link

Boilerplate using redux-react? #39

Open trungpham opened 8 years ago

trungpham commented 8 years ago

Does anyone know if there is any universal app boiler plate using this library?

AVVS commented 8 years ago

Havent seen one :(

On 23 Jun 2016, at 10:24, Trung Pham notifications@github.com wrote:

Does anyone know if there is any universal app boiler plate using this library?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

trungpham commented 8 years ago

is there any lightweight webpack + redux + react-router that you can recommend? light weight enough that allows us to plug in redux-react?

AVVS commented 8 years ago

https://github.com/davezuko/react-redux-starter-kit is a pretty good one imo

trungpham commented 8 years ago

Checkout this project. They have a very clean way of prefetching data. https://github.com/coodoo/react-redux-isomorphic-example On Thu, Jun 23, 2016 at 9:41 AM Vitaly Aminev notifications@github.com wrote:

https://github.com/davezuko/react-redux-starter-kit is a pretty good one imo

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/makeomatic/redux-connect/issues/39#issuecomment-228109304, or mute the thread https://github.com/notifications/unsubscribe/AAJIcFWNwvZgIpAEn_FAxsO6pr_I6fbFks5qOrc4gaJpZM4I8hik .

AVVS commented 8 years ago

Cant say anything except that I personally dont like it and at the time when I was writing this one - I looked through it - I dislike code style and I dislike having fetching utility in the boilerplate. The approach is rather similar in any case.

For SSR you need to write a rendering function on the server, which accepts components from react-router matching function, traverses them, gathers functions that define how to fetch async props and form store, then you feed that to react renderer with a filled store and get what you need.

trungpham commented 8 years ago

Agree. I like your approach much better, avoiding mucking with the component internal. Can we fork https://github.com/davezuko/react-redux-starter-kit and add redux-connect to it? On Thu, Jun 23, 2016 at 10:07 AM Vitaly Aminev notifications@github.com wrote:

Cant say anything except that I personally dont like it and at the time when I was writing this one - I looked through it - I dislike code style and I dislike having fetching utility in the boilerplate. The approach is rather similar in any case.

For SSR you need to write a rendering function on the server, which accepts components from react-router matching function, traverses them, gathers functions that define how to fetch async props and form store, then you feed that to react renderer with a filled store and get what you need.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/makeomatic/redux-connect/issues/39#issuecomment-228116533, or mute the thread https://github.com/notifications/unsubscribe/AAJIcIb04XImepM6jlSbPUlvHAYTqNOOks5qOr1OgaJpZM4I8hik .

AVVS commented 8 years ago

I wont have time for this and there are implementations for it from previous redux-async-connect. Author of the template I've suggested is very receptive - so if you do write a PR - I believe it would be accepted

trungpham commented 8 years ago

This is another boilerplate project that has redux-async-connect integrated already. There is an outstanding PR to move to redux-connect too. https://github.com/erikras/react-redux-universal-hot-example/pull/1140

On Thu, Jun 23, 2016 at 10:20 AM Vitaly Aminev notifications@github.com wrote:

I wont have time for this and there are implementations for it from previous redux-async-connect. Author of the template I've suggested is very receptive - so if you do write a PR - I believe it would be accepted

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/makeomatic/redux-connect/issues/39#issuecomment-228119881, or mute the thread https://github.com/notifications/unsubscribe/AAJIcBx9IG7J4FGB-ZA7675CNllTkAbNks5qOsA9gaJpZM4I8hik .

AVVS commented 8 years ago

do you want to add a PR to docs with that info?

qndrey commented 8 years ago

erikras/react-redux-universal-hot-example#1140

i'm using this one, but i've modified it to use your refactored version :) so i can do that

AVVS commented 8 years ago

please do :)

abhirathore2006 commented 8 years ago

@AVVS i have few questions.

  1. how this is different from original library ?
  2. there are two ways described in original library , one was to use decorator and other to use static method, so does that static method still available in this library ?
  3. how static method is different from decorator and when to use which
AVVS commented 8 years ago
  1. refactored to support nested dependant state loading, small syntax changed
  2. only decorator, it's quite complex to define a user-provided static property, consult with code for more
  3. static is a generated function based on this: https://github.com/makeomatic/redux-connect/blob/master/modules/containers/decorator.js

What decorator does is it creates a static function that is used when traversing resolved components for a given route in react-router. That's essentially the whole thing that this module does

abhirathore2006 commented 8 years ago

@AVVS thanks for clarification , also is it necessary to provide the decorator on Every component connected to router ? will it be okay if i don't have decorator at root level component but have it on child components ?

AVVS commented 8 years ago

@abhirathore2006 decorators must be attached to components returned from react-router. Because pre-fetching is done before render happens, it's essential that we gather information about state needed before the actual render. You can provide no decorators at all - then state wont be prefetched, you can provide just some decorators - then it will be fetched for the components that are returned for a given route. Hope I've answered your question

abhirathore2006 commented 8 years ago

ok thanks :) @AVVS , i will use this on my project and will let you know, how it goes