Authentication and client side fetch

[Dattaya]

@bananaoomarang would you like to make part 2 of your tutorial? I can send you the implementation of authentication and fetching for the transition on the client. Your repository is still going to be very simple compared to react-redux-universal-hot-example.

[bananaoomarang]

Yeah sure, maybe we can just put what's here on a branch/link to a fork of yours as an example. Feel free to write whatever and link to mine as a part one. Just don’t want the code here to differ too much from what's in the tutorial.

[suancarloj]

@Dattaya could you already share the authentification implementation based on this tutorial ?

[Dattaya]

@suancarloj I'll publish a draft in a few days.

[suancarloj]

Awesome, thanks :)

[Dattaya]

So here it comes–https://github.com/Dattaya/isomorphic-redux/tree/client-fetch-and-auth I hope it will be helpful somehow. If you or anyone else have an idea how to improve it(without turning it into a react-redux-universal-hot-example, we need an example for beginners) or simplify it even further, your advice and prs are very welcome.

[sachalifs]

@Dattaya I really like your example with client fetch and auth and how you used shouldComponentUpdate on the client, found it really helpful! :+1:

[Dattaya]

I'm very glad to hear that, @slifszyc. I'll continue to further improve this example.

[sachalifs]

yup, I think I'll be using it as a boilerplate for a new app I'm working on, thanks again!

[Dattaya]

This discussion has been opened for a very long time, it's time to close it, but before I do that, I would like to list some of the differences between the repositories. New functionality in isomorphic-redux-plus:

• Server side code is compiled with babel. The reason is that babel@6's babel-register is not meant for production. Additional benefits of precompiling backend code include lower memory usage and faster start up time (see https://github.com/erikras/react-redux-universal-hot-example/issues/1161)

• Works with redux-devtools chrome extension (code responsible for this is in configureStore.js)

  

• react-router-redux was integrated to fully enable time travel functionality (url can be kept in sync during time travel); e.g.redux-devtools needs it.
• Handles API calls (api.js); for a simple project this might just be enough, otherwise you can split it into a separate server, like erikras/react-redux-universal-hot-example does.
• Has a simple system to handle API errors (statusReducer, ErrorHandler, ErrorPage). If a route was matched successfully but the call to an API method (an action should have role: primary field, as an example see loadTodos in todoActions) returns an error, a user would see an error page if transition is perfomed in a browser, if the page was accessed directly, the server would also return a proper status code. Error handling can be customized, right now it handles the next errors:
  • No internet connection or the backend returns absolutely nothing. Shows this error message: "Couldn't load the page. Maybe you have a problem with the Internet connection. Please try again later." Only possible to see in a browser or if your API is a separate server, then it should be handled differently.
  • API call returns 5xx status. Returns a 503 page.
  • In every other case returns a 404 page.

To see it in action uncomment either // return res.sendStatus(500); or // return res.sendStatus(404); in api.js. Then you can load the todos page directly, or load the about page and click on "todos". In the former case server should return an appropriate status code:

If you need to show an error page not in response to an api call fail but manually based on some condition, you can do that too by dispatching a setStatus action.

• Can fetch data also on the client, without blocking a transition (fetchData); fetch(getState(), dispatch, this.props.params); is called in componentDidMount. Some people prefer to block transition until all of the data is fetched and some prefer to show the page right away, there is an interesting discussion about this topic https://github.com/ReactJSTraining/history/issues/22. If you need a blocking transition, take a look, for example, at https://github.com/makeomatic/redux-connect.
• Has a simple authentication example.

and several other minor changes.