React Redux: Difference between revisions

From bibbleWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 21: Line 21:
var state = {color:'red', name: 'Adam', point:5}
var state = {color:'red', name: 'Adam', point:5}
var state2 = Object.assign({}, state, {point:50})
var state2 = Object.assign({}, state, {point:50})
</syntaxhighlight>
=Example=
Note ... is new syntax for spread
<syntaxhighlight lang="javascript">
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});
</syntaxhighlight>
</syntaxhighlight>

Revision as of 05:09, 23 May 2020

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


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});