Downloaded 15 times
![Some unmeaningful code (reducers)
import * as t from './actionTypes'
const usersReducer = (state = initialState, action) =>
{
let newState = _.clone(state);
switch (action.type) {
case t.CONNECT
newState[t.payload.id].status = 'online';
return newState;
default:
return state
}
};
import * as t from './actionTypes'
const chatsReducer = (state = initialState, action) => {
let newState = _.clone(state);
switch (action.type) {
case t.SEND_MESSAGE:
newState[t.payload.chatID].messages.push(t.payload.message);
return newState;
default:
return state
}
};](https://image.slidesharecdn.com/redux1-161119143423/75/Modular-development-with-redux-118-2048.jpg)
![Some unmeaningful code (Wiring up)
//main.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import { createStore } from 'redux';
import AppContainer from './app/containers/AppContainer';
import reducer from './rootReducer';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
//we create the store and tell it which root reducer to use
let store = createStore(reducer);
//We create the root component and
ReactDOM.render(
<Provider store={store}>
<AppContainer />
</Provider>,
document.getElementById('app')
);
//rootReducer.js
import { combineReducers} from 'redux';
import users from './users';
import chats from './chats';
const combinedReducers = combineReducers({
[users.config.namespace] : users.reducer,
[chats.config.namespace] : chats.reducer
})](https://image.slidesharecdn.com/redux1-161119143423/75/Modular-development-with-redux-119-2048.jpg)
![Some unmeaningful code (reducers)
import * as t from './actionTypes'
const usersReducer = (state = initialState, action) =>
{
let newState = _.clone(state);
switch (action.type) {
case t.CONNECT
newState[t.payload.id].status = 'online';
return newState;
default:
return state
}
};
import * as t from './actionTypes'
const chatsReducer = (state = initialState, action) => {
let newState = _.clone(state);
switch (action.type) {
case t.SEND_MESSAGE:
newState[t.payload.chatID].messages.push(t.payload.message);
return newState;
default:
return state
}
};](https://crownmelresort.com/image.slidesharecdn.com/redux1-161119143423/75/Modular-development-with-redux-118-2048.jpg)
![Some unmeaningful code (Wiring up)
//main.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import { createStore } from 'redux';
import AppContainer from './app/containers/AppContainer';
import reducer from './rootReducer';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
//we create the store and tell it which root reducer to use
let store = createStore(reducer);
//We create the root component and
ReactDOM.render(
<Provider store={store}>
<AppContainer />
</Provider>,
document.getElementById('app')
);
//rootReducer.js
import { combineReducers} from 'redux';
import users from './users';
import chats from './chats';
const combinedReducers = combineReducers({
[users.config.namespace] : users.reducer,
[chats.config.namespace] : chats.reducer
})](https://crownmelresort.com/image.slidesharecdn.com/redux1-161119143423/75/Modular-development-with-redux-119-2048.jpg)
Uploaded byJavier Lafora Rey
Modular development with redux
The document discusses Redux in the context of modular development, emphasizing its role in managing application state through a predictable state container. It outlines the principles of Redux, including the importance of a single source of truth, immutability, and the use of pure functions for state changes. Additionally, the document presents examples of components, actions, reducers, and provides resources for further learning.
More Related Content
Similar to Modular development with redux
Modular development with redux
- 1.
- 2. Who am I? +10years developing mostly in rails but also java, js, python, php, haskell, C++ I don’t appreciate programming languages more than I would appreciate a hammer. Likes beer, guitar, business, technology, music, learning, dancing, F1, poker, reading, biking, superheroes, movies, tv series, wine, food. @eLafo linkedin, twitter, github...
- 11.
- 17.
- 19. 4^4 = 256differentpossible global states
- 27. What are we goingto see? Some basics we should know How I understand a component How do we wire components to build a high order component -or app with redux. Advantages Warnings
- 28.
- 29.
- 30.
- 31.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38. 0 DO NOT PRESS! Button pressed Text: Press! Button:green background: red Counter: 1
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46. 1 DO NOT PRESS! Button released Text: Press! Button:green background: red Counter: 1
- 48. View Presentation in whichever flavour(React, Angular, JS, JQuery...) DO NOT PRESS!
- 49. Presentation Data / State ActionCreators (events) 1 DONOT PRESS! Presentational component Functional component
- 50. Actions This should bethe easy part Button released Button pressed
- 53.
- 56. This is anew state. The input is copied before doing any change
- 57. State = f(state,action)
- 58. State = f(state,action)
- 59. Pure function Returnvalue is only determined by its input values, without observable side effect
- 61. reducer.js selectors.js actionTypes.js Component creator tookit DataData Data Presentational components Functional components Slot for selector State input Slot for action creators config.js types.js actions.js
- 62.
- 64.
- 65.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82. REDUX is alibrary for implementing a Design Pattern
- 83. REDUX attempts tomake state mutations predictable
- 84. Inspired by Flux,CQRS and Event Sourcing
- 85. Redux Principles Single source oftruth State is read-only Changes are made by pure functions
- 86. Single source of truth Reduxprinciples The state of your whole application is stored in an object tree within a single store.
- 87. State is read- only Reduxprinciples The only way to change the state is to emit an action, an object describing what happened.
- 88. Changes are made bypure functions Redux principles To specify how the state tree is transformed by actions, you write pure reducers.
- 89.
- 95. UI = f(state) State= f(state, action) Functional programming all around
- 98.
- 102. Can’t be thatgood...
- 103.
- 104. Side effects ● Turnpromises into actions (one for each state)
- 105.
- 106. Side effects ● Turnpromises into actions (one for each state) ● Redux-thunk
- 107.
- 108.
- 109. Side effects ● Turnpromises into actions (one for each state) ● Redux-thunk ● redux-api-middleware
- 110.
- 111.
- 116. What we have seen Whyit is so difficult to reuse code The problem when maintaining the state How to think when building components How to wire components with redux How Redux deals with state A new way of thinking?
- 117. Some unmeaningful code(actions) import * as config from './config' const CONNECT = config.namespace + “/CONNECT” const userIsOnline = (user) => ({ return { type: CONNECT, payload: user.id } }); import * as config form './config' const SEND_MESSAGE = config.namespace + "/SEND_MESSAGE" const sendMessage = (chatID, senderID, text) => ({ type: SEND_MESSAGE, payload: { chatID: chatID, message: { text: text, status: “sent”, timestamp: now(), senderId: senderId, messageId: getID() } } });
- 118. Some unmeaningful code(reducers) import * as t from './actionTypes' const usersReducer = (state = initialState, action) => { let newState = _.clone(state); switch (action.type) { case t.CONNECT newState[t.payload.id].status = 'online'; return newState; default: return state } }; import * as t from './actionTypes' const chatsReducer = (state = initialState, action) => { let newState = _.clone(state); switch (action.type) { case t.SEND_MESSAGE: newState[t.payload.chatID].messages.push(t.payload.message); return newState; default: return state } };
- 119. Some unmeaningful code(Wiring up) //main.js import React from 'react'; import ReactDOM from 'react-dom'; import {Provider} from 'react-redux'; import { createStore } from 'redux'; import AppContainer from './app/containers/AppContainer'; import reducer from './rootReducer'; import injectTapEventPlugin from 'react-tap-event-plugin'; injectTapEventPlugin(); //we create the store and tell it which root reducer to use let store = createStore(reducer); //We create the root component and ReactDOM.render( <Provider store={store}> <AppContainer /> </Provider>, document.getElementById('app') ); //rootReducer.js import { combineReducers} from 'redux'; import users from './users'; import chats from './chats'; const combinedReducers = combineReducers({ [users.config.namespace] : users.reducer, [chats.config.namespace] : chats.reducer })
- 120. Resources and furtherreading http://redux.js.org/ https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f#.fua79muzx https://scotch.io/tutorials/bookshop-with-react-redux-ii-async-requests-with-thunks http://softwareengineering.stackexchange.com/questions/235558/what-is-state-mutable-state-and-immutable-state https://daveceddia.com/timeline-for-learning-react/ http://www.yegor256.com/2016/08/15/what-is-wrong-object-oriented-programming.html https://datarockets.com/blog/redux-structure http://jpsierens.com/tutorial-react-redux-webpack/ https://www.sitepoint.com/how-to-build-a-todo-app-using-react-redux-and-immutable-js/ http://jaysoo.ca/2016/02/28/organizing-redux-application/
- 121. Resources and furtherreading http://es.slideshare.net/nikgraf/react-redux-introduction http://es.slideshare.net/benlesh1/async-redux-actions-with-rxjs-react-rally-2016 http://es.slideshare.net/nirkaufman/redux-with-angular-2-workshop-2016 http://es.slideshare.net/fdaciuk/designing-applications-with-redux http://es.slideshare.net/FDConf/redux-from-twitter-hype-to-production-61102006 http://es.slideshare.net/justingordon/react-on-rails-v4032 http://es.slideshare.net/rolandkuhn/reactive-streams
- 123.
Editor's Notes
- #3 No le tengo aprecio a ningún lenguaje. Me metí en esto porque me gusta resolver problemas, así que no esperéis ver código
- #4 Esto es un caso de estudio. Estoy buscando formas diferentes de desarrollar. Machine learning, datos y event sourcing, ethereum
- #5 En qué se traduce el beneficio de la reuitilizacion? En tiempo para…
- #10 Y para reutilizar deberíamos estar trabajando con piezas como estas.
- #11 Pero demasiadas veces nos quedamos aquí.
- #12 Por qué pasa esto? Porque nos han enseñado que había que tener tres abstracciones. Y eso mola
- #13 Y lo pusimos en práctica con el patrón mvc Y es un patrón que funciona muy bien
- #14 Para esto. Pero a medida que la tecnología avanzaba (angular, react…) nos vinimos arriba y empezamos a hacer cosas
- #15 Como esta (tiempo real, dashboards, interfaces complicadas)
- #16 Y empezaron los problemas. Modelos con modelos vistas con mas de un modelo. Modelos que participan en dos vistas… los controladores ahí viendo la orgía que no controlaban nada. Así que un día que te levantas como optimista. En plan me voy a comer el mundo y decides que vas a refactorizar
- #17 Y esto por qué pasa? Habéis oído alguna vez hablar sobre el problema de mantener el estado?
- #20 Y somos incapaces por naturaleza de gestionar eso
- #22 Porque tenemos 7 slots. Así que hacemos cosas que terminan fallando. Y cuando empezamos a debiguear pasan cosas como que tocas en un sitio y se rompe aquello
- #23 Y como lo solucionamos? Dibujando porque así es mucho mas fácil.
- #24 Viene de bbdd .nos hemos adaptado a la máquina en lugar de hacer que la máquina nos entienda a nosotros. Porque nosotros no pensamos así. Pensamos en grafos. Poner slide de grafo
- #25 Y esto es ungrafo
- #26 Pero es que no nos bastaba con esto.cabtidad posibles de estados. Y un estado muy distribuido.Sino que encima dejamos que toque todo dios.
- #30 Un ejemplo de un componente
- #33 Vamos a ver cómo lo soluciona redux
- #47 Tenemos tres componentes principales
- #50 Smart y dumb components
- #51 Quitar el tachado
- #58 Quitar initialstate y actions
- #62 Poner cuadrados. Cada cuadrado es un directorio o un fichero
- #63 Map reduce?
- #66 Que hacemos con la capa de datos? Es donde idealmente en un futuro deberíamos desarrollar. Integrando datos.
- #69 Cambiar esta diapo y poner una toma de enchufe
- #70 Cambiar esta diapo y poner una toma de enchufe
- #71 Cambiar esta diapo y poner una toma de enchufe
- #72 Cambiar esta diapo y poner una toma de enchufe
- #76 A nosotros decidimos que parte del árbol va a cada reduce e. Porque el root reduce e es mio
- #81 Map reduce