6 ms·

Redux Blog Example

80 points by olegakbarov 11y ago

iandanforth 11y ago
Couple of requests 1. Add comments There's a lot going on here and very few comments 2. In the README point out the entry point of the code There are a lot of places one could start reading, give users a hint as to the best place to start. Your app template.html points toward a /js/app.js file which doesn't exist in the source, which is fine, but if I'd like to read before I run a pointer would be helpful!
- olegakbarov 11y ago
  Thank you for your feedback. We'll edit README to better explain what's going on and how stuff works!
deleted 11y ago
[deleted]
danmaz74 11y ago
Out of curiosity, why didn't you use Immutable.js for your Store? You thought about it and chose a different path, or you just didn't consider it at all?
- 0mbre 11y ago
  So far I can't see the use of immutableJS in redux. When using basic pattern of returning a new store on each action the store isn't mutated. Is it just a very costly convenience ?( costly cause immutableJS isn't exactly small)
  - grrowl 11y ago
    The only benefit I can think of is prevention of [accidental?] modification of `state` within your selectPropsFromState functions or within rendering code itself. Which is something you should never, ever do anyway, and the mistake should be quite obvious given redux's suggested structure. Given ImmutableJS also has a performance overhead in ES5, I'd definitely agree with you.
  - danmaz74 11y ago
    The biggest reason we adopted Immutable.js is that it allows us to use PureRenderMixin (or, to make some situations even simpler, https://github.com/jurassix/react-immutable-render-mixin https://github.com/jurassix/react-immutable-render-mixin ) for all our components. This gives a great performance boost, without having to think how to design a specific shouldComponentUpdate for each expensive component. This is especially important with Redux if you connect your store to one controller-view which then passes the props down to a big tree of components (which should be the standard way to do things with both Flux and Redux).
avolcano 11y ago
Cool stuff! In a somewhat similar vein, I've been working on a static site generator (like Jekyll) that uses React/Redux instead of a templating system: https://github.com/thomasboyt/peridot https://github.com/thomasboyt/peridot It actually is very similar to any other isomorphic React app, except instead of hosting an API, it simply renders each page out to a file, as well as a JSON version of each post that acts as the "API" used to retrieve further pages from the frontend app. There's an example site here: http://loudplaces.disco.zone/ http://loudplaces.disco.zone/
- daveidol 11y ago
  Thanks for this! Very cool idea. I haven't looked closely enough - do you pre-render the pages somehow to maintain SEO?
  - avolcano 11y ago
    Yep! It's a bit convoluted at the moment, and I should comment it better, but it basically just does the following: 1. Get a list of all posts and compute their URLs 2. Run each URL against the React app's react-router table (https://github.com/thomasboyt/peridot/blob/master/src/pagesBuilder/render/renderRoute.js https://github.com/thomasboyt/peridot/blob/master/src/pagesB...). This gets the static markup for each route. 3. Wrap this static markup in a <Page /> container (which has e.g. <script> and <link> tags for assets), and write the resulting output to an HTML file. That HTML file is what you initially load. It then loads a Webpack bundle of the same React app, and once that's loaded, React on the front-end "re-renders" into the already-rendered React app container (though it doesn't actually re-render the DOM, as it's able to diff against the existing DOM nodes). There's some more nuance to this - for example, the server-side rendering also passes in a Redux store with the state needed for rendering the page (e.g. the contents of a post), as well as embedding the JSON-serialized state in a <script /> tag so when the front-end code takes over, it can just load the embedded state. Honestly, though, the isomorphic rendering only took a few hours to implement, and most of that was me figuring out how to use Redux (previously, I'd used other Flux implementations that had somewhat different concepts). The biggest takeaway I've gotten from this project is that React isomorphic rendering is way easier than I thought.
madeofpalk 11y ago
Nice. I love Redux + React so much, so I appreciate any effort into making people more aware of it. I was really excited that you found a way to return proper 404's! https://github.com/GetExpert/redux-blog-example/blob/master/app/server.js#L50-L52 https://github.com/GetExpert/redux-blog-example/blob/master/... There are a few things I would have done differently though. Check out: - this sample project I made. it's not ideal though and I have learnt a since I made this, but it has a few good ideas https://github.com/joshhunt/reactapus https://github.com/joshhunt/reactapus - the official 'real world' example https://github.com/rackt/redux/tree/master/examples/real-world https://github.com/rackt/redux/tree/master/examples/real-wor... Suggestions: - Consider putting client, server, and universal code into seperate folders like in my example - it makes it easier to understand what code is executing where. - Move routing into a 'universalRouter.js' which is the one place that performs routing and returns the root component. Both the server and client use this. https://github.com/joshhunt/reactapus/blob/master/src/app/universalRouter.js https://github.com/joshhunt/reactapus/blob/master/src/app/un... - Actions should be very simple, return basic serialisable objects, and be super easy to test. Don't make API calls directly in actions. Redux has fantastic middleware to make this easier for you. I do it in a basic way in my sample project, but the redux real-world example does it much better. Check out https://github.com/rackt/redux/blob/master/examples/real-world/actions/index.js#L38 https://github.com/rackt/redux/blob/master/examples/real-wor... - Consider using ESLint. Airbnb has a premade config that does a pretty good job of providing best practices. https://github.com/airbnb/javascript/tree/master/linters https://github.com/airbnb/javascript/tree/master/linters Beware, it's going to flag a whole bunch of stuff in you project, but you'll get much better code out of it.
- darawk 11y ago
  FYI I've made a set of redux middleware for executing and composing effectful actions: http://github.com/redux-effects/redux-effects http://github.com/redux-effects/redux-effects Which makes it dead simple to write universal apps and keep all your functions pure. Would love to get some feedback on it from people who are into this stuff.
  - olegakbarov 11y ago
awinder 11y ago
Really liked the auth workflow that was set up here: https://github.com/GetExpert/redux-blog-example/blob/master/app/routes/index.js https://github.com/GetExpert/redux-blog-example/blob/master/.... I had a hard time finding good examples recently and a LOT of trouble finding good examples w/ react-router's 1.0 branch, so this is very much appreciated :-)
deleted 11y ago
[deleted]

80 points by olegakbarov 11y ago

Couple of requests 1. Add comments There's a lot going on here and very few comments 2. In the README point out the entry point of the code There are a lot of places one could start reading, give users a hint as to the best place to start. Your app template.html points toward a /js/app.js file which doesn't exist in the source, which is fine, but if I'd like to read before I run a pointer would be helpful!

olegakbarov 11y ago
Thank you for your feedback. We'll edit README to better explain what's going on and how stuff works!

deleted 11y ago

[deleted]

danmaz74 11y ago

Out of curiosity, why didn't you use Immutable.js for your Store? You thought about it and chose a different path, or you just didn't consider it at all?

0mbre 11y ago
So far I can't see the use of immutableJS in redux. When using basic pattern of returning a new store on each action the store isn't mutated. Is it just a very costly convenience ?( costly cause immutableJS isn't exactly small)
- grrowl 11y ago
  The only benefit I can think of is prevention of [accidental?] modification of `state` within your selectPropsFromState functions or within rendering code itself. Which is something you should never, ever do anyway, and the mistake should be quite obvious given redux's suggested structure. Given ImmutableJS also has a performance overhead in ES5, I'd definitely agree with you.
- danmaz74 11y ago
  The biggest reason we adopted Immutable.js is that it allows us to use PureRenderMixin (or, to make some situations even simpler, https://github.com/jurassix/react-immutable-render-mixin https://github.com/jurassix/react-immutable-render-mixin ) for all our components. This gives a great performance boost, without having to think how to design a specific shouldComponentUpdate for each expensive component. This is especially important with Redux if you connect your store to one controller-view which then passes the props down to a big tree of components (which should be the standard way to do things with both Flux and Redux).

avolcano 11y ago

Cool stuff! In a somewhat similar vein, I've been working on a static site generator (like Jekyll) that uses React/Redux instead of a templating system: https://github.com/thomasboyt/peridot https://github.com/thomasboyt/peridot It actually is very similar to any other isomorphic React app, except instead of hosting an API, it simply renders each page out to a file, as well as a JSON version of each post that acts as the "API" used to retrieve further pages from the frontend app. There's an example site here: http://loudplaces.disco.zone/ http://loudplaces.disco.zone/

daveidol 11y ago
Thanks for this! Very cool idea. I haven't looked closely enough - do you pre-render the pages somehow to maintain SEO?
- avolcano 11y ago
  Yep! It's a bit convoluted at the moment, and I should comment it better, but it basically just does the following: 1. Get a list of all posts and compute their URLs 2. Run each URL against the React app's react-router table (https://github.com/thomasboyt/peridot/blob/master/src/pagesBuilder/render/renderRoute.js https://github.com/thomasboyt/peridot/blob/master/src/pagesB...). This gets the static markup for each route. 3. Wrap this static markup in a <Page /> container (which has e.g. <script> and <link> tags for assets), and write the resulting output to an HTML file. That HTML file is what you initially load. It then loads a Webpack bundle of the same React app, and once that's loaded, React on the front-end "re-renders" into the already-rendered React app container (though it doesn't actually re-render the DOM, as it's able to diff against the existing DOM nodes). There's some more nuance to this - for example, the server-side rendering also passes in a Redux store with the state needed for rendering the page (e.g. the contents of a post), as well as embedding the JSON-serialized state in a <script /> tag so when the front-end code takes over, it can just load the embedded state. Honestly, though, the isomorphic rendering only took a few hours to implement, and most of that was me figuring out how to use Redux (previously, I'd used other Flux implementations that had somewhat different concepts). The biggest takeaway I've gotten from this project is that React isomorphic rendering is way easier than I thought.

madeofpalk 11y ago

Nice. I love Redux + React so much, so I appreciate any effort into making people more aware of it. I was really excited that you found a way to return proper 404's! https://github.com/GetExpert/redux-blog-example/blob/master/app/server.js#L50-L52 https://github.com/GetExpert/redux-blog-example/blob/master/... There are a few things I would have done differently though. Check out: - this sample project I made. it's not ideal though and I have learnt a since I made this, but it has a few good ideas https://github.com/joshhunt/reactapus https://github.com/joshhunt/reactapus - the official 'real world' example https://github.com/rackt/redux/tree/master/examples/real-world https://github.com/rackt/redux/tree/master/examples/real-wor... Suggestions: - Consider putting client, server, and universal code into seperate folders like in my example - it makes it easier to understand what code is executing where. - Move routing into a 'universalRouter.js' which is the one place that performs routing and returns the root component. Both the server and client use this. https://github.com/joshhunt/reactapus/blob/master/src/app/universalRouter.js https://github.com/joshhunt/reactapus/blob/master/src/app/un... - Actions should be very simple, return basic serialisable objects, and be super easy to test. Don't make API calls directly in actions. Redux has fantastic middleware to make this easier for you. I do it in a basic way in my sample project, but the redux real-world example does it much better. Check out https://github.com/rackt/redux/blob/master/examples/real-world/actions/index.js#L38 https://github.com/rackt/redux/blob/master/examples/real-wor... - Consider using ESLint. Airbnb has a premade config that does a pretty good job of providing best practices. https://github.com/airbnb/javascript/tree/master/linters https://github.com/airbnb/javascript/tree/master/linters Beware, it's going to flag a whole bunch of stuff in you project, but you'll get much better code out of it.

darawk 11y ago
FYI I've made a set of redux middleware for executing and composing effectful actions: http://github.com/redux-effects/redux-effects http://github.com/redux-effects/redux-effects Which makes it dead simple to write universal apps and keep all your functions pure. Would love to get some feedback on it from people who are into this stuff.
- olegakbarov 11y ago

awinder 11y ago

Really liked the auth workflow that was set up here: https://github.com/GetExpert/redux-blog-example/blob/master/app/routes/index.js https://github.com/GetExpert/redux-blog-example/blob/master/.... I had a hard time finding good examples recently and a LOT of trouble finding good examples w/ react-router's 1.0 branch, so this is very much appreciated :-)

deleted 11y ago

[deleted]