Migration to redux simple router and async-props

[sars]

No description provided.

[sars]

ryanflorence/async-props#42

[quicksnap]

Looks like the build is failing..

[sars]

@quicksnap Do you mean npm run build ?
It works fine for me...

[quicksnap]

The Travis builds are failing, that is. They're at the bottom of this comment thread.

[sars]

@quicksnap , yeah, I'm going to fix it after ryanflorence/async-props#42 will be merged

[bdefore]

@sars that's a nice helper the resolver addition. i'm wondering if they'll be amenable to merging it.

[bdefore]

just had a look through this PR and it provides a nice lean update for this project to react-router 2.0 and replacing custom serverside fetching with something more tightly integrated with ongoing development there. it accomplishes much of what universal-redux does (#759) apart from updating to Babel 6, which has another proposal (#778).

i still think there's value in depending on universal-redux to easier rise with the tide of future developments and provide a configurable base for those using this as a starting point, but that conversation can be independent of merging this one. in fact, this aligns RRUHE closer to UR, and would ease the migration path.

[jakegibson]

line 15 of src/server.js has a reference to redux-router that needs to be removed for it to build

[andresgutgon]

This needs to be upgraded to 0.20.x

From react-router-bootstrap README.md:

Note: Releases from v0.20.0 onward only support React Router v2.x....

[andresgutgon]

I'm trying to port this PR to my code.
When doing npm install I was having problems with post install script of async-props. Opened an issue in their repo:
ryanflorence/async-props#46

To be able to run npm install I installed babel globally npm install babel@x.x.x -g

[bdefore]

I had a PR out to fix this ryanflorence/async-props#36

But at this point I think they want to stay out of the build tool jungle. I ended up pulling async-props source directly into universal-redux in order to support it.

[sars]

Have a look, guys, please
#531 (comment)
It should make your life much easier...

@erikras, @bdefore If you want, I can create for your projects...

[bdefore]

@sars that would be great, thanks!

[sars]

@quicksnap , @erikras , going to redo this pr with redux-asyc-connect today. it should be good

[sars]

@jakegibson , thank you for comments

line 15 of src/server.js has a reference to redux-router that needs to be removed for it to build

done

This needs to be upgraded to 0.20.x

done

🔥 remove this line

done

@quicksnap , @erikras , please, have a look.
I believe this PR really simplify this example.

I did not use all features from redux-async-connect here to keep diff as small as possible...
but i'm going to add some examples in next PR

[andresgutgon]

💪 waiting for it. I'll try it on my project

[sars]

there is some problem with test:

20 01 2016 11:22:09.969:ERROR [karma]: { [Error: no such file or directory]
  code: 'ENOENT',
  errno: 34,
  message: 'no such file or directory',
  path: '/_karma_webpack_/tests.webpack.js' }
Error: no such file or directory
    at MemoryFileSystem.readFileSync (/Users/rodik/RubymineProjects/react-redux-universal-hot-example/node_modules/memory-fs/lib/MemoryFileSystem.js:114:10)
    at MemoryFileSystem.readFile (/Users/rodik/RubymineProjects/react-redux-universal-hot-example/node_modules/memory-fs/lib/MemoryFileSystem.js:297:21)
    at doRead (/Users/rodik/RubymineProjects/react-redux-universal-hot-example/node_modules/karma-webpack/index.js:156:26)
    at Plugin.readFile (/Users/rodik/RubymineProjects/react-redux-universal-hot-example/node_modules/karma-webpack/index.js:160:3)

but i don't see how this is related to PR
and cannot understand hot to fix it....

[lemonCMS]

@sars, great PR, just one question. When the widget fails to load (33%), the widget page keeps waiting for a response and will never load. Do you have any solution for that?

[sars]

Oh yes, i fixed tests :)

[sars]

@lemonCMS fixed in async connect 0.1.4
fixed in this PR too
thanks

[erikras]

This is gorgeous. 👍 Great work, @sars!

[erikras]

I noticed you removed scrollableHistory. Does this not have the problem that was solving?

[sars]

@erikras thanks for comments

I don't completely understand what scroll-behavior lib does...
But anyway - it looks like it isn't compatible with react-router 2:

taion/scroll-behavior#28

[lemonCMS]

@sars when the route changes depending on witch scroll-behavior you have implemented, the page scroll to the top. Without this, the scroll position stay's the same.

But indeed, not yet compatible.

[sars]

@quicksnap Rebased
About deferred data fetching - I'm working on 1.0.0 version now. I'm going to use redial approach, i think.

[FoxxMD]

👍

[mmahalwy]

@sars sorry to do this to you, so close! I found a bug that is due to removing this line: https://github.com/erikras/react-redux-universal-hot-example/pull/833/files#diff-e6a5b42b2f7a26c840607370aed5301aL97

Now query params are not set on the location. I don't know if that's a problem with us here or a problem with react-router-redux not picking up on the location.

[sars]

@mmahalwy I used react-router/lib/createMemoryHistory https://github.com/erikras/react-redux-universal-hot-example/pull/833/files#diff-e6a5b42b2f7a26c840607370aed5301aR17
to create history.
And it should add query... see:
https://github.com/rackt/react-router/blob/master/modules/createMemoryHistory.js#L11

[mmahalwy]

@sars hmm weird, I must have had your old changes. You're right! Works perfectly :)

[sars]

Guys, take a look please at new version of redux-async-connect

brocoders/redux-async-connect#16 (comment)

Documentation is in progress... But it solves several significant issues: router in params, ability to define something like deferred props, etc.

[sars]

scroll-behavior works now!

[farrrr]

getRoutes is unnecessary...

[sars]

@farrrr
thanks, fixed

[sars]

@quicksnap , I think it looks quite stable for merging to master.... what do you think?

[gabriel-miranda]

I want this so bad in master branch

[quicksnap]

It feels stable to me. I've been using it in our product and haven't had much problems. Here goes nothing!

[snackycracky]

BAM

Sent from my Tricorder

On 15.02.2016, at 09:23, Dan Schuman notifications@github.com wrote:

Merged #833.

—
Reply to this email directly or view it on GitHub.

[andresgutgon]

😱

OMG 👏

[anomaly44]

this is great, nice work guys! thanks!

[oyeanuj]

this is great works folks!

would it be possible for someone involved in the PR to write a couple of bullet points as a guide on what has changed conceptually and how (essentially, how to migrate)? I suspect a lot of people who have been using this boilerplate and have done a lot of subsequent work would want to absorb these changes, and quick explanation on the changes would be very helpful!

thanks again everyone involved with it!

[andrewmclagan]

@oyeanuj Agreed, feel that would help allot of people out.

[janhoogeveen]

Don't we need to change the requireLogin method in routes.js as well?

const requireLogin = (nextState, replaceState, cb) => {
    function checkAuth() {
      const { auth: { user }} = store.getState();
      if (!user) {
        // oops, not logged in, so can't be here!
        replaceState(null, '/');
      }
      cb();
    }

    if (!isAuthLoaded(store.getState())) {
      store.dispatch(loadAuth()).then(checkAuth);
    } else {
      checkAuth();
    }
  };

to

  const requireLogin = (nextState, replace, cb) => {
    function checkAuth() {
      const { auth: { user }} = store.getState();
      if (!user) {
        // oops, not logged in, so can't be here!
        replace('/');
      }
      cb();
    }

    if (!isAuthLoaded(store.getState())) {
      store.dispatch(loadAuth()).then(checkAuth);
    } else {
      checkAuth();
    }
  };

[FoxxMD]

@oyeanuj +1 for a guide. This looks much cleaner but I need some clear instructions on how to migrate these changes.

[sars]

Guys, I'll try to create something like migration doc, but to be honest it's not so obvious. If you look at diff from this PR, you find all changes.
I'd like to add some docs and fix existing docs in this project, because some of them became a little bit outdated.
But first it would be great to solve issue with deferred props:
#928
There was such feature in this project and now there isn't
I try to find the most convenient way to solve this and need some feedback...

[oyeanuj]

@sars Now that #928 is merged, any high-level explanation of changes whenever you get a chance would be super appreciated :) Thanks again for all your work!

[sars]

@oyeanuj will do shortly