Pros and Cons of React + Redux

1.js

{ type: 'ADD_COMMENT', comment: { body: 'test comment', user: 1 } }

2.js

import React from 'react'
import style from './style.css'

export default class CTAButton extends React.Component {
  render () {
    return (
      <a href={this.props.href} style={style}>
        <h3>{this.props.title}</h3>
        <span>{this.props.body}</span>
      </a>
    )
  }
}

3.js

<CTAButton title="Shop Now" body="While stocks last!" href="/shop" />

4.js

{
  tweets: [
    { text: 'Interested in #ContinuousDelivery? Check out our new book!', user: 'madetech_com' },
    { text: 'Join us tomorrow night for #QuizBuzz, a code-themed pub quiz - free to enter, prizes to win, food & drink provided', user: 'madetech_com' },
    { text: 'Overstacked? The journey to becoming a full stack developer: https://t.co/cwEqxPM1sE', user: 'madetech_com' }
  ]
}

5.js

import React from 'react'
import { connect } from 'react-redux'
import store from './store'
import TweetList from '../components/TweetList'

class TweetDash extends React.Component {
  render() {
    return (
      <section>
        <h1>Dashboard</h1>
        // The 'tweets' section of state is passed to the component as a 'prop'
        // You can pass this data down to sub-components
        <TweetList tweets={this.props.tweets} />
      </section>
    )
  }
}

function mapStateToProps(state) {
  // Redux diffs this against the full state internally to determine
  // which parts of the state this component needs. It'll only re-render
  // this component when these parts of the state change.
  return { tweets: state.tweets }
}

export default connect(mapStateToProps)(TweetDash)

6.js

class LikeButton extends React.Component {
  render () {
    const text = this.props.liked ? 'Unlike' : 'Like'

    return (
      <button onClick={::this.handleClick}>
        {text}
      </button>  
    )
  }

  handleClick (e) {
    e.preventDefault()

    // Proxy the onClick event to the component using this component.
    // This is quite common when building re-usable components.
    this.props.onClick(!this.props.liked)
  }
}

<LikeButton liked={true} onClick={::console.log} />

7.js

{
  "scripts": {
    "start": "webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors --port 3000",
    "build": "NODE_ENV=production webpack --progress --colors"
  },
}