Escolar Documentos
Profissional Documentos
Cultura Documentos
Cory House
@housecor
reactjsconsulting.com
Actions
Store
Immutability
Reducers
Action Creators
rateCourse(rating) {
return { type: RATE_COURSE, rating: rating }
}
Action
Action Creator
Redux Store
store.dispatch(action)
store.subscribe(listener)
store.getState()
replaceReducer(nextReducer)
Immutability
Immutability:
Mutable
Objects
Arrays
Functions
state = {
Current state
state.role = 'admin';
return state;
state = {
Current state
return state = {
name: 'Cory House'
role: 'admin'
}
Copy
Signature
Object.assign(target, ...sources)
Example
Object.assign({}, state, {role: 'admin'});
Flux
State is mutated
Redux
State is immutable
Why Immutability?
Clarity
Performance
Awesome Sauce
Immutability = Clarity
Huh, who changed that state?
Why Immutability?
Clarity
Performance
Awesome sauce
state = {
Immutability = Performance
Why Immutability?
Clarity
Performance
Time-travel debugging
Undo/Redo
Handling Immutability
ES5
Object.assign
Lodash merge
Spread operator
Lodash extend
Object-assign
Libraries
react-addonsupdate
Immutable.js
Trust
redux-immutablestate-invariant
Immutable.js
Reducers
What is a Reducer?
What is a Reducer?
What is a Reducer?
function myReducer(state, action) {
switch (action.type) {
case INCREMENT_COUNTER:
state.counter++;
return state;
}
}
What is a Reducer?
function myReducer(state, action) {
switch (action.type) {
case INCREMENT_COUNTER:
return (Object.assign({}, state, counter + 1);
}
}
Forbidden in Reducers
Mutate arguments
courses
loadStatus
authors
New State
loadingStatus
authors
Store
courses
Actions
- Represent user intent
- Must have a type
Summary
Store
- dispatch, subscribe, getState
Immutability
- Just return a new copy
Reducers
- Must be pure
- Multiple per app
- Slice of state
Next up: Connecting React to Redux