diff --git a/css/styles.css b/css/styles.css index 23bce6f..bd9ea53 100644 --- a/css/styles.css +++ b/css/styles.css @@ -16,4 +16,12 @@ .white { color: white !important; + font-weight: bold; + -webkit-text-stroke: 1px black; +} + +.red { + color: red !important; + font-size: 500px !important; + -webkit-text-stroke: 4px black !important; } diff --git a/index.html b/index.html index 224cbb6..ef223d3 100644 --- a/index.html +++ b/index.html @@ -48,13 +48,6 @@

Dan Abramov

-
@@ -62,17 +55,9 @@

class="section-colored" data-background-image="/img/model-view-controller-dark.jpg" > -

+

NO

-
@@ -80,12 +65,6 @@

Pub-sub

-
@@ -98,7 +77,7 @@

Componentes React inteligentes

- Conectados al flujo de redux + Conectados al flujo de Redux

Recibe propiedades inyectadas @@ -123,15 +102,6 @@

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent); -

@@ -143,24 +113,15 @@

Pueden emitir una acción

-

-
+

Acciones

-
+

Son mensajes muy sencillos

@@ -170,18 +131,6 @@

El componente emite con dispatch

-

@@ -198,14 +147,11 @@ 

-
+

Reductores

-
+

Son funciones

@@ -215,15 +161,6 @@

Reaccionan a una acción

-

@@ -246,7 +183,7 @@ 

-
+

Hay varios reductores

@@ -276,14 +213,11 @@

-
+

Almacén de datos

-
+

Viene definido por la estructura de los reductores

@@ -330,18 +264,6 @@

Patrón thunk

-

@@ -364,37 +286,81 @@

>

+
+

+ Funciones generadoras +

+

+ Permiten la ejecución de una función por pasos +

+
+
+
+						
+							function* generator(i) {
+								yield i;
+								yield i + 10;
+							}
+
+							var gen = generator(10);
+
+							console.log(gen.next().value); // => 10
+							console.log(gen.next().value); // => 20
+						
+					
+
-
+

Redux Sagas

-

+

Requiere el uso de funciones generadoras (ES6)

-

+

Las sagas escuchan las acciones igual que un reductor

- +

+ Es una API más difícil de entender pero más flexible +

+

+ No altera el flujo de una funcion sino que extiende el paradigma de Redux +

+
+
+							
+								import { call, put, spawn, takeLatest } from 'redux-saga/effects';
+								import * as types from 'actions/actionTypes';
+								import { actionSucceeded, actionFailed } from 'actions';
+								import { doSomethingAPI } from 'APICalls';
+								
+								function* somethingRequested(action) {
+									const params = action.payload;
+									try {
+										const result = yield call(doSomethingAPI, params);
+										yield put(actionSucceeded({ result }));
+									} catch (error) {
+										yield put(actionFailed({ message: error.message }));
+									}
+								}
+								
+								function* somethingRequestedSaga() {
+									yield takeLatest(types.SOMETHING_REQUESTED, somethingRequested);
+								}
+								
+								function* mySaga() {
+									yield spawn(somethingRequestedSaga);
+								}
+								
+								export default mySaga;
+							
+						
+

@@ -409,30 +375,6 @@

src="/img/react-native-logo.png" />

-

@@ -443,17 +385,12 @@

src="/img/react-vr-logo.png" />

-

Server Side Rendering

-

+

Next
src="/img/nextjs-logo.jpg" />

-

Serverless

-

+

Firebase
data-background-image="/img/gracias-por-venir.jpg" >

+
+

+ Repositorio del ejercicio +

+

+ https://github.com/abelta/poke-redux-2 +

+