React Redux: Difference between revisions
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});