A talk about Flux and Redux architectural patterns, prepared for FrekyHours@Sourcesense event

2. *X ARCHITECTURES
Gabriele Falasca

3. *X Architectures – Gabriele Falasca

4. *X Architectures – Gabriele Falasca
Originally was
MVC

5. *X Architectures – Gabriele Falasca
mvc

6. *X Architectures – Gabriele Falasca
mvc

7. *X Architectures – Gabriele Falasca

8. *X Architectures – Gabriele Falasca
Hey dudes,
Flux
is here

9. *X Architectures – Gabriele Falasca
flux

10. *X Architectures – Gabriele Falasca
Flux is
predictable
OUT = f(state)

11. *X Architectures – Gabriele Falasca

12. *X Architectures – Gabriele Falasca
action
{
type: SAMPLE_ACTION,
payload: {some_data_here}
}

13. *X Architectures – Gabriele Falasca
action creator
const someAction = (data) => {
type: SAMPLE_ACTION,
payload: data
}

14. *X Architectures – Gabriele Falasca
Todo app (original!)
https://github.com/facebook/flux/tree/master/examples/flux-todomvc

15. *X Architectures – Gabriele Falasca
a lot of tool!

16. *X Architectures – Gabriele Falasca
redux
reducer + Flux

17. *X Architectures – Gabriele Falasca
Principles of redux
• single source of truth (state not store)
• state is read-only
• only pure functions can change the state

18. *X Architectures – Gabriele Falasca
Programming recap
(accumulation, input) => new accumulation

19. *X Architectures – Gabriele Falasca
Redux reducer
(state, action) => new state

20. *X Architectures – Gabriele Falasca
Todo app (original!)
actions
const add = function(text) {
return {
actionType: "addTodo",
text: text
};
};
const update = function(index, text) {
return {
actionType: "updateTodo",
text: text,
index: index
};
};
const deleteTodo =function(index) {
return {
actionType: "deleteTodo",
index: index
};
};
const deleteAll = function(){
return {
actionType: "deleteAll"
};
};
credits: https://codingjam.it/

21. *X Architectures – Gabriele Falasca
Todo app (original!)
reducers
credits: https://codingjam.it/
const initialState = {
todos: []
};
function addTodo(state,text) {
let toReturn = Object.assign({},state,{
todos:[...state.todos]
});
toReturn.todos.push(text);
return toReturn;
};
function updateTodo(state,index,text){
let toReturn = Object.assign({},state,{
todos:[...state.todos]
});
toReturn.todos[index] = text;
return toReturn;
};
function deleteTodo(state,index){
let toReturn = Object.assign({},state,{
todos:[...state.todos]
});
toReturn.todos.splice(index, 1);
return toReturn;
};
export default function todoApp(state = initialState, action) {
switch (action.actionType) {
case "addTodo":
return addTodo(state,action.text);
case "updateTodo":
return updateTodo(state,action.index,action.text)
case "deleteTodo":
return deleteTodo(state,action.index);
case "deleteAll":
return initialState;
default:
return state;
};
}

22. *X Architectures – Gabriele Falasca
Questions?