ReactJS revolucionó la creación de componentes en las aplicaciones web incluyendo programación funcional y virtual DOM. De esta forma, haciendo componentes de componentes, llega un momento en que ReactJS se apodera de toda la vista. En ese momento, ReactJS necesita que le aporten todo aquello donde no llega: comunicación entre componentes, routing, comunicación con backend, gestión del estado de la aplicación, etc. Aquí aparece Redux. Son sólo 99 líneas de código y un buen puñado de ideas brillantes, promoviendo un ecosistema de librerías. Explicaremos cuáles son esos principios fundamentales y cómo bien entendidos nos llevan a simplificar al extremo el código. Nos permitirá de forma sencilla tener una aplicación con Undo/Redo, optimistic UI, comunicación con backend y colaboración en tiempo real. Hablaremos de la escalabilidad para aplicaciones grandes introduciendo la inmutabilidad de los objetos del estado con ImmutableJS. video: https://youtu.be/kWvR4878vJY

15. function mapValues(obj,fn) {
return Object.keys(obj).reduce((result,key)=>{
result[key]=fn(obj[key],key);
returnresult;
},{});
}
function pick(obj,fn){
return Object.keys(obj).reduce((result,key)=>{
if (fn(obj[key])){
result[key]= obj[key];
}
returnresult;
},{});
}
function bindActionCreator(actionCreator,dispatch){
return (...args)=>dispatch(actionCreator(...args));
}
exportfunction bindActionCreators(actionCreators,dispatch){
return typeofactionCreators=== 'function'?
bindActionCreator(actionCreators,dispatch):
mapValues(actionCreators,actionCreator=>
bindActionCreator(actionCreator,dispatch)
);
}
exportfunction compose(...funcs) {
return arg=> funcs.reduceRight((composed,f) =>f(composed),arg);
}
exportfunction applyMiddleware(...middlewares){
return (next)=> (reducer,initialState)=>{
varstore= next(reducer,initialState);
vardispatch=store.dispatch;
varchain=[];
chain=middlewares.map(middleware=>middleware({
getState: store.getState,
dispatch:(action)=>dispatch(action)
}));
dispatch=compose(...chain)(store.dispatch);
return{...store, dispatch};
};
}
exportfunction combineReducers(reducers){
varfinalReducers=pick(reducers,(val)=> typeofval ==='function');
return (state= {},action)=>mapValues(finalReducers,
(reducer,key)=>reducer(state[key],action)
);
}
exportfunction createStore(reducer,initialState){
varcurrentReducer= reducer;
varcurrentState =initialState;
varlisteners=[];
varisDispatching=false;
function getState() {
returncurrentState;
}
function subscribe(listener){
listeners.push(listener);
returnfunction unsubscribe(){
varindex= listeners.indexOf(listener);
listeners.splice(index,1);
};
}
function dispatch(action){
if (isDispatching){
throw new Error('Reducersmaynot dispatchactions.');
}
try {
isDispatching=true;
currentState =currentReducer(currentState,action);
}finally{
isDispatching=false;
}
listeners.slice().forEach(listener=> listener());
returnaction;
}
function (nextReducer){
currentReducer= nextReducer;
dispatch({type:'@@redux/INIT'});
}
dispatch({type: '@@redux/INIT'});
return {dispatch,subscribe,getState, replaceReducer};
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99