React redux tutorial

I just finshed the Redux tutorial from Egghead:

It is a very good tutorial and it starts from building a React app using Redux, and then proceeds by refactoring it and showing some cool tips and tricks to make the code more readable and maintenable.

Here is an experimental project I built in the meantime:

Here are the notes I took during the tutorial, with the hope someone finds them useful.

Decoupling for re-use:
Presentation component => only UI no behaviour = function, pass props as args
Container component => data and behaviour for presentational component = class, use this.props for props

this.forceUpdate() forces re render

Use function instead of class when possible

Change function to =>

Class Provider: React.Component.getChildContext => { store }
<Provider store=a> <App /> </Provider>
Retrieve context by const { store } = this.context in App.
App.contextTypes = Provider.contextTypes = { store: React.propTypes.object }

Use link components to help decoupling

1. Redux
2. React
3. Refactoring code to containers and components
4. React-redux for Provider and passing store using context
5. React-redux with connect and mapStateToProps to avoid Link classes

Separate presentation components and connect them with the store by using react-redux

No in-line dispatch of actions. Make the actions explicit by adding separate function for each.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s