Gentle introduction to Redux
What is the state of application?
React!
Actions
Click
Click save
Functions
f(x) = x * 2
f(2) = 4
f(10) = 20
f(x, y) = x * y
f(4, 4) = 16
f(4, 10) = 40
State transforming functions - Reducers
f(state, action) = transformedState
const initialState = {
name: 'A welcoming canvas',
postIts: [
{ text: 'Hello!', position: { x: 0.1, y: 0.3 }, color: 'yellow' }
],
isEditorOpen: false,
}
export default function canvasReducer(state = initialState, action) {
switch (action.type) {
case "OPEN_POST_IT_EDITOR":
// change isEditorOpen to true
return { ...state, isEditorOpen: true, newPostItPosition: action.position }
case "CREATE_POST_IT":
// append post it, close editor, clear position of nerw post it
return { ...state, postIts: [].concat(state.postIts, action.postIt), isEditorOpen: false, newPostItPosition: {} }
default:
return state;
}
return state;
}
f(state) = UserInterface
Redux DevTools demo
Tanks for watchin!
Redux for dummies
By Lucjan Suski
