En esta clase vamos a ver cómo podemos combinar Reducer y para ello vamos a crear un pequeño filtro en nuestra aplicación.
Recuerda que esta clase es parte de un curso completo, un Full Stack Book Camp JavaScript,
que te dejo aquí arriba por si te has perdido alguna clase o quieres repasarlo.
Venga, empezamos la clase.
Mientras yo voy poniendo aquí notas, podemos ver que podemos tener algunas notas importantes y otras no tan importantes.
Pues lo que vamos a hacer es poder filtrar entre las notas que sean importantes y no importantes.
Ahora, como puedes ver, cada vez que yo estoy iniciando mi proyecto se me borran todas las notas y eso es un poco rollo.
Vamos a añadir aquí un estado inicial, un initial state.
Vamos a poner que es un array porque por ahora es un array.
Bienvenidos a la midu clase.
Vamos a poner que este es importante, que tiene la id es 1.
Y content, gracias por venir a la clase en un domingo.
Molas mucho.
El que no sepa lo que es molar, que sepa que es algo positivo.
Ya tenemos nuestras dos notas y lo que hacemos aquí en el estado inicial, en lugar de poner este array vacío,
lo que voy a hacer es initial state este.
De esta forma, ahora cuando entremos directamente vamos a tener un estado inicial directamente.
Vamos a tener que estar creando constantemente.
¿Ves?
Ah, bueno.
No, esto no.
Ahora, ¿ves?
Tenemos aquí unas cuantas.
Vamos a añadir el filtro.
Por ahora lo voy a añadir a saco, luego lo extraemos.
Por ahora vamos a poner aquí el filtro.
Vamos a poner un div aquí en medio y vamos a poner all.
All input type radio.
Vamos.
Y si le ponemos el mismo nombre, lo que va a hacer es que todos los input type radios van
a responder al mismo estado.
Así que vamos a poner esto por aquí.
Esto me voy a copiar por ahora.
Podría poner aquí ya el filter selected.
Este filter selected lo que va a hacer es ejecutarse cada vez que cambiemos un filtro.
Y vamos a ver, vamos a saber cada filtro que hemos seleccionado, ¿vale?
Así que cuando cambie, vamos a tener aquí el filter selected.
Lo que le tenemos que pasar aquí es decirle, vale, cuando se toca este, pues este es el filtro de all.
Ahora vamos a repetir esta operación.
Tenemos el all, tenemos esto.
Este sería para important.
Así que ponemos aquí important.
Y aquí sería no important.
Vamos a ponerlo así.
No important.
Si volvemos a nuestra app, no es el filtro más bonito del mundo.
Estoy seguro de ello.
Pero más o menos lo importante es que funcione o que veamos aquí que ahora hace esto.
Tenemos que crear nuestro store.
Tenemos que guardar esta información.
La quiero guardar en el store, en el estado global de nuestra aplicación.
¿Vale?
¿Cómo lo podemos hacer?
Porque si nos fijamos en el estado de notReducer, el problema es que ahora es un array.
Esto lo dije en la clase anterior.
El estado global de tu aplicación puede ser lo que tú quieras.
Puede ser un número, puede ser un booleano, puede ser un array.
Aunque lo mejor normalmente es que sea un objeto.
¿Por qué?
Porque un objeto es extensible.
¿Vale?
Es muy fácil de hacer que crezca.
Un array, ya podemos ver que en este caso ya estoy teniendo problemas de que no puedo
de alguna forma guardar los filtros.
No puedo decir, ah, es que quiero guardar también la información sobre los filtros.
No lo puedo hacer.
Para hacer esto, lo que vamos a hacer más bien, en lugar de tocar el reducer y que tenga
un steady y tal, lo que vamos a hacer es tocarlo en la store.
Vamos a ir a nuestro estado, a nuestro punto de inicio de la aplicación, donde estábamos
creando la store.
Y aquí lo que podríamos tener serían diferentes partes para nuestra store.
Vamos a hacer que tendríamos por un lado las notas y vamos a utilizar aquí el NodeReducer
y por otro lado podríamos tener el de filter y que tendríamos un filter reducer, por ejemplo.
Esto lo que haría es como tener las dos partes de nuestra store.
Lo que pasa es que esto no funciona así.
Ya me gustaría a mí que fuese así tan fácil y decir, ah, sí, toma, aquí te paso esto.
Porque al final, cuando tú en el Create Store, si me pongo aquí un momentito, veríamos
que solo puedes recibir una.
Solo puedes recibir un reducer.
Así que necesitamos una forma de juntar estos dos reducers.
El que voy a hacer de, bueno, filter o, sí, filter está bien.
El reducer de filter, que lo voy a crear ahora.
Tengo que hacer que se combinen, que se fusionen y se creen uno solo.
Porque solo el store puede recibir uno.
¿Cómo podemos hacer esto?
Pues aquí en el Create Store lo que puedo hacer es un CombineReducers.
Este método viene de Redux también.
Y lo que hacemos es en Create Store vamos a pasarle como primer parámetro un CombineReducers.
Y le decimos que para las notas se tiene que encargarle el NodeReducers y para los filtros
el FilterReducer.
Y esto también lo podríamos hacer así.
El Reducer lo vamos a crear de aquí, que creo que va a quedar más claro.
En este caso, ¿vale?
Y este Reducer se lo pasamos aquí.
Ahora se está quejando de que el FilterReducer no existe, que esto no está definido.
Pues justamente es el que vamos a crear.
Ahora, alguien me podría decir, a ver, ¿por qué la estás liando?
Porque aquí tienes un Reducer donde podrías haber añadido un ActionType y decir Nodes, Filter, Toggle, ¿no?
Algo así.
Y aquí filtrar, guardar o SetFilter, SetFilters, por ejemplo, ¿no?
Y aquí guardarle esta información en el estado y tal.
Pero claro, este es uno de los problemas muy típicos que suelen ocurrir con Redux.
En la que te pones a hinchar un Reducer con demasiadas cosas.
Lo mejor es que tengas un montón, bueno, un montón no, pero los Reducers que tienen sentido en tu aplicación.
¿Vale?
En lugar de tener ahí un montón de pequeñas acciones dentro de un solo Reducer.
O sea, que sea inteligente, vas separando Reducers en contextos que más o menos tengan sentido
para que no se vuelvan en monstruos.
Así que esto lo vamos a evitar y lo que vamos a hacer es crear nuestro propio Reducer, FilterReducer.
Voy a guardar estos cambios de aquí.
Este Index nos falta el FilterReducer.
Lo vamos a crear dentro de Reducers.
Vamos aquí.
FilterReducer.js.
Este FilterReducer, a ver, podríamos por ahora, pues nada, vamos a hacer un Export.
Const, Const, Filter, Reducer.
¿Y cómo era el Reducer más sencillo que podíamos hacer?
Pues era con el State y lo que devolvía era el State.
Por ahora vamos a dejarlo así.
Voy a poner un Console.Log para que veamos una cosa.
Vamos a poner aquí el Action, porque aquí como segundo parámetro en los Reducers siempre llega el Action.
Vamos a poner Action, ¿vale?
Esto lo vamos a dejar así, porque lo que quiero ahora mismo es que funcione nuestra aplicación.
Lo que he dicho antes, muchas veces nos ponemos a hacer un montón de cambios, un montón de cambios y llega un momento en el que no sabemos ya por qué ha fallado nuestra aplicación y tal.
Bueno, pues vamos a intentar que nuestra aplicación, mientras hemos añadido unos pocos cambios, funcione correctamente y luego veamos a ver qué es lo que está pasando, por qué está pasando y adaptamos.
Vale.
Cuando refresco, vale, me dice que FilterReducer, no lo estoy exportando, pero lo estoy exportando aquí.
Y eso es porque este FilterReducer no hay que sacarlo aquí, hay que sacarlo de su propio archivo.
Vale, Reducers, FilterReducer.
Ya tenemos esto, vamos a ver ahora qué dice.
Fíjate, uy, ¿qué ha pasado?
Ahora, ReducerFilterReturnUndefined, no sé qué, no sé cuánto, no sé qué.
ReducerFilterReturnUndefined, do it in solution, is the state page, do the reducer is undefined.
Vale, ¿por qué?
Primero, el FilterReducer, este state que tenemos aquí, pues ahora mismo es undefined.
Y lo que está haciendo es pasar justamente, como lo único que hace es pasar undefined, pues undefined.
Bueno, esto hay que arreglarlo y hay que darle un estado que sea inicial.
Por ahora lo que podemos hacer es que su estado inicial sea all, ¿vale?
Que es, si nos vamos aquí al Filter, que habíamos hecho anteriormente en la app.
¿Veis que teníamos aquí FilterSelectedAll, Important y tenemos NoImportant?
Vale, pues vamos a poner que por defecto sea all y ya está.
Vamos a refrescar.
Sigue habiendo petes.
No pasa nada, los arreglamos.
A ver qué pasa.
Nos dice que nodes.map no es una función.
Vamos a ver esto donde ocurre.
Este nodes.map lo tenemos justamente aquí, ¿no?
Parece que nodes.map nos dice que esto, el .map no es una función.
Este problema, lo que está pasando aquí, es que a lo mejor nodes no tiene lo que estábamos esperando.
Antes estábamos esperando que fuese un array.
Si venimos aquí y miramos aquí el console.log de nodes, vamos a ver qué tiene este nodes, ¿vale?
Vamos aquí a la consola, refrescamos y aquí vemos ahora que lo que tenemos es un objeto donde tenemos el filtro y las notas.
Así que ahora es donde tiene sentido justamente el selector, ¿vale?
Del state, lo que queremos en este nodesContainer no es todo el estado, sino que queremos el state.nodes.
Vamos a guardar los cambios aquí, refrescamos y ahora parece que todo funciona correctamente.
Ya tenemos las notas iniciales y estamos leyendo del estado correcto.
Vamos a intentar a ver si podemos cambiar toggle importance.
Esto sí, podemos añadir una nota, parece que todo funciona bien.
Así que ya tenemos más o menos nuestra aplicación un poquito estable.
Podemos continuar con nuestro reducer de los filtros porque esto todavía no está haciendo nada.
Así que vamos a ello.
Filter reducer.
Ah, te quería enseñar una cosa.
Te quería enseñar una cosa, que esto es importante.
Voy a refrescar y voy a cambiar, voy a limpiar esto y fíjate que voy a cambiarle la importancia a esta nota de aquí, ¿vale?
Voy a darle.
Vale, me pone toggle important.
Vale, es que solo he puesto un console lock.
Voy a poner el node reducer.
Voy a poner aquí otro console lock, ¿vale?
He puesto un console lock en los dos reducers, en el de notas y en el de filtros, ¿vale?
Vamos a ver.
Cambio, voy a eliminar esto.
Le cambio la importancia.
Fíjate, y esto es súper importante y por eso el nombre de tus acciones es súper importante.
Fíjate que la acción ha llegado a los dos reducers.
La acción de cambiar la importancia de la nota le ha llegado tanto al reducer de las notas como al reducer de los filtros.
Por eso es tan importante, en este caso, fíjate que yo a la hora de hacer en el reducer, fíjate que el action type le estoy poniendo como un prefijo que es arroba nodes.
Hay gente, o antiguamente se hacía más created o node created.
Podríamos hacer más cosas como, por ejemplo, el hecho de que...
Gracias.