Flux && Redux

Redux

Action

• Has a type - string (i.e. 'ADD_PRODUCT')
• Has a payload (i.e. info about product)

Dispatch

• Actions are wrapped in a dispatch
• Dispatch is connected to the store
• Will initiate the reducer

Reducer

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_THEME:
      return Object.assign({}, state, {
        theme: action.newTheme
      })
    case ADD_TODO:
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      })    
    default:
      return state
  }
}

Combining State

var obj = {
    foo: 'bar'
}

var otherObj = {
    num: 5
}

var newObj = Object.assign({}, obj, otherObj);

console.log(newObj) // {foo: 'bar', num: 5}

Subscribed components will update

import React from 'react';

import {connect} from 'react-redux';

class ProductsComponent extends React.Component {
    render () {
        <div>
            {this.props.products}
        </div>
    }
}

function mapStateToProps(state) {
    return {
        products: state.products
    }
}

export default connect(mapStateToProps)(ProductsComponent)

Pros

• One source of truth
• Easy to debug
• One path of data flow

Cons

• Lots of boilerplate
• Takes a while to implement