bananaoomarang / isomorphic-redux

Isomorphic Redux demo, with routing and async actions
https://medium.com/@bananaoomarang/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4
MIT License
455 stars 87 forks source link

import routes from 'route' #62

Closed nitte93 closed 7 years ago

nitte93 commented 8 years ago

HI, Thanks for the boilerplate. I'm using your boilerplate for my isomorphic app. Sorry, for this tyro question. I'm trying to understand the match function in react-router.

In your server.js you have import route from 'route'. Which in turn you are passing to the match function. From what I understood, based on the url location we match through our application's routes and if found, we display the required component. Please correct me If i'm wrong.

Now, for this matching to take place, we need to import our application's route and pass them down to the match function, right? Again, please correct me, if I'm missing something.

So, in your server.jsx, you have import routes from 'routes', but you don't have any routes folder or any file names as routes in the root directory. So, where exactly this routes coming from.Or how does this work. Cause when I look at this boilerplate. https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/server.js#L20

The getRoute is nothing but a set of routes, which he is passing to the match function.

bananaoomarang commented 8 years ago

Hi, this import works because of the NODE_PATH variable set in package.json, which tells node where to look for modules.

I added the shared directory so you can access parts if the app without typing shared every time. If you prefer, you can remove this (and the moduleDirectories key from webpack), and just prefix most of the imports with shared manually.

Hope that clarifies things!

nitte93 commented 8 years ago

Hi, Thanks for such an early response.
It clearly makes sense now. Just one more question, what exactly is the renderProps in the callBack function inside the match function.

Is is the component that needs to be rendered for the matched route? I tried reading it here : https://github.com/reactjs/react-router/blob/master/docs/API.md#match-routes-location-history-options--cb But didn't get much, how exactly it works with the Routercontext component.

Also, is the match function gets called upon every URL request. I mean what if we have hundreds of routes? Does it iterates through all the routes upon each request, and combines reducers, creates stores, etc. Thanks in advance. And I'm following you.

bananaoomarang commented 8 years ago

I believe that the renderProps are the props that react-router passes to the components it renders (ie, routeParams etc).

I'm not very familiar with react-router internals, but I would assume it uses some sort of hash map to get the route to run match against, avoiding iterating over all routes each time and testing some attribute. The function used here will render a page on every request, though it shouldn't be too much work to alter that if it becomes an issue.

nitte93 commented 8 years ago

Thanks for the response, I high;y appreciate that. I will do more reading on that, and would love to contribute to this repo once I get a good grasp of them. Thanks once again. 👍