React Redux

Unidirectional

Data only flows one direction

Pure Functions

• Like static is c#/c++ only using inputs to produce outputs

 function multiply(a, b)
 {
   return a * b;
 }

• No side effects
• Also yields same result

Immutability

ES6 allows us to copy objects using Object.assign e.g.

var state = {color:'red', name: 'Adam', point:5}
var state2 = Object.assign({}, state, {point:50})

Example

Note ... is new syntax for spread

Stores often are stored in stores/configurationStore.js at the same level as compontents

import {createStore} from 'redux'

var defaultState = {
    originalAmount: 0.00
};

function amount(state = defaultState, action) {
    if(action == = 'CHANGE_ORIGIN_AMOUNT') {
        return {
            ...state,
            originalAmount: action.data
        }
        // return Object.assign({},state, {originalAmout: action.data})
    }
}

var store = createStore();

store.subscribe(function() {
    console.log('state', store.getState());
})

store.dispatch({type:'CHANGE_ORIGIN_AMOUNT', data: 30.00});
store.dispatch({type:'', data: 30.00});
store.dispatch({type:'', data: 30.00});

Example Component

Show us subscribing to the store to make sure updates passed down to the components.

class MainConponent extends React.Component {

    componentDidMount() {
        store.subscribe( () => {
            this.setState({});
        } )
    }

    render() {
        return (
           <div>
               <Conversion originalAmount={store.getState().originalAmount} />
           </div>        )
    }
}

Example Component with provider

This removes the need to subscribe and pass the original amount

class MainConponent extends React.Component {

    render() {
        return (
           <div>
               <Conversion/>
           </div>        )
    }
}

ReactDOM.render(<Provide store={store}><MainComponent /></Provider>,getElementById('container'));

We need to map the state back to the properties on initialisation of the component. We do this via connect

export default connect(function mapStateToProps(state,props)) {

    return {
        originAmount : state.originalAmount
    }
}

Adding logging to redux

This will show action prev state and next state

import {applyMiddleware,createStore } from 'redux';
import logger from 'redux-logger';

var store = createStore(
    amount,
    applyMidddleware(logger)
);

Setting types using keyMirror

Just a nice little tip. keyMirror stops you having to type more for const e.g.

export var Actiontype = {
    const THIS_IS_A_CONST = "THIS_IS_A_CONST";
};

becomes

export var Actiontype = keyMirror ({
    THIS_IS_A_CONST = null
});