{"componentChunkName":"component---src-templates-content-template-js","path":"/es/part6/redux_heredado","result":{"data":{"markdownRemark":{"html":"
\n

Este es el material relacionado con Redux que se ha retirado del curso. Puedes continuar con este material y sus ejercicios si ya habías empezado esta parte utilizando Redux. En caso contrario, se recomienda seguir el material nuevo. Este material se eliminará en junio de 2026.

\n
\n
\n

Hasta ahora, hemos seguido las convenciones de gestión de estado recomendadas por React. Hemos colocado el estado y las funciones para manejarlo en el nivel superior de la estructura de componentes de la aplicación. A menudo, la mayoría del estado de la aplicación y los métodos para modificarlo residen directamente en el componente raíz. Luego, el estado y sus métodos de control se han pasado a otros componentes con props. Esto funciona hasta cierto punto, pero cuando las aplicaciones crecen, la gestión del estado se vuelve desafiante.

\n

Arquitectura de Flux

\n

Facebook desarrolló la arquitectura Flux para facilitar la gestión del estado. En Flux, el estado se separa completamente de los componentes de React en sus propios stores(almacenes).\nEl estado en el store no se cambia directamente, sino con diferentes actions(acciones).

\n

Cuando una acción cambia el estado de un store, las vistas se vuelven a generar:

\n\"diagramadispatcher->store->view\" srcset=\"/static/165b40470776ac449f8b9604d4828004/772e8/flux1.png 200w,\n/static/165b40470776ac449f8b9604d4828004/e17e5/flux1.png 400w,\n/static/165b40470776ac449f8b9604d4828004/5a190/flux1.png 800w,\n/static/165b40470776ac449f8b9604d4828004/c1b63/flux1.png 1200w,\n/static/165b40470776ac449f8b9604d4828004/29007/flux1.png 1600w,\n/static/165b40470776ac449f8b9604d4828004/090a8/flux1.png 2504w\" sizes=\"(max-width: 800px) 100vw, 800px\">\n

Si alguna acción en la aplicación, por ejemplo presionar un botón, provoca la necesidad de cambiar el estado, el cambio se realiza con una acción.\nEsto hace que se vuelva a renderizar la vista:

\n\"mismo\n

Flux ofrece una manera estándar de cómo y dónde se mantiene el estado de la aplicación y cómo se modifica.

\n

Redux

\n

Facebook tiene una implementación para Flux, pero usaremos la librería Redux. Funciona con el mismo principio, pero es un poco más sencilla. Facebook también usa Redux ahora en lugar de su Flux original.

\n

Conoceremos Redux implementando una aplicación de contador una vez más:

\n\"aplicación\n

Crea una nueva aplicación Vite e instala redux con el comando

\n
npm install redux
\n

Como en Flux, en Redux el estado también se almacena en un store.

\n

Todo el estado de la aplicación se almacena en un objeto JavaScript en el store. Debido a que nuestra aplicación solo necesita el valor del contador, lo guardaremos directamente en el store. Si el estado fuera más complicado, diferentes elementos del estado se guardarían como campos separados del objeto.

\n

El estado del store se cambia con acciones. Las acciones son objetos que tienen al menos un campo que determina el tipo de acción.\nNuestra aplicación necesita, por ejemplo, la siguiente acción:

\n
{\n  type: 'INCREMENT'\n}
\n

Si hay datos relacionados con la acción, se pueden declarar otros campos según sea necesario. Sin embargo, nuestra aplicación de contador es tan simple que las acciones están bien con solo el campo de tipo.

\n

El impacto de la acción sobre el estado de la aplicación se define mediante un reducer. En la práctica, un reducer es una función a la que se le da el estado actual y una acción como parámetros. Devuelve un nuevo estado.

\n

Definamos ahora un reducer para nuestra aplicación:

\n
const counterReducer = (state, action) => {\n  if (action.type === 'INCREMENT') {\n    return state + 1\n  } else if (action.type === 'DECREMENT') {\n    return state - 1\n  } else if (action.type === 'ZERO') {\n    return 0\n  }\n\n  return state\n}
\n

El primer parámetro es el estado en el store. El reducer devuelve un nuevo estado basado en el tipo de acción. Entonces, por ejemplo, cuando el tipo de acción es INCREMENT, el estado obtiene el valor antiguo más uno. Si el tipo de acción es ZERO, el nuevo valor del estado es cero.

\n

Cambiemos un poco el código. Hemos utilizado declaraciones if-else para responder a una acción y cambiar el estado. Sin embargo, la declaración switch es el enfoque más común para escribir un reducer.

\n

También definamos un valor predeterminado de 0 para el parámetro state. Ahora, el reducer funciona incluso si el estado del store aún no se ha inicializado.

\n
const counterReducer = (state = 0, action) => {  switch (action.type) {\n    case 'INCREMENT':\n      return state + 1\n    case 'DECREMENT':\n      return state - 1\n    case 'ZERO':\n      return 0\n    default: // if none of the above matches, code comes here\n      return state\n  }\n}
\n

El reducer nunca debe ser llamado directamente desde el código de la aplicación. Solo es proporcionado como parámetro a la función createStore que crea el store:

\n
import { createStore } from 'redux'\nconst counterReducer = (state = 0, action) => {\n  switch (action.type) {\n    case 'INCREMENT':\n      return state + 1\n    case 'DECREMENT':\n      return state - 1\n    case 'ZERO':\n      return 0\n    default:\n      return state\n  }\n}\n\nconst store = createStore(counterReducer)
\n

El store ahora usa el reducer para manejar acciones, que son dispatched o 'enviadas' al store con su método dispatch(envío).

\n
store.dispatch({ type: 'INCREMENT' })
\n

Puedes averiguar el estado del store utilizando el método getState.

\n

Por ejemplo, el siguiente código:

\n
// ...\n\nconst store = createStore(counterReducer)\n\nconsole.log(store.getState())store.dispatch({type: 'INCREMENT'})store.dispatch({type: 'INCREMENT'})store.dispatch({type: 'INCREMENT'})console.log(store.getState())store.dispatch({type: 'ZERO'})store.dispatch({type: 'DECREMENT'})console.log(store.getState())
\n

imprimiría lo siguiente en la consola

\n
0\n3\n-1
\n

porque al principio el estado del store es 0. Después de tres acciones INCREMENT el estado es 3. Al final, después de las acciones ZERO y DECREMENT, el estado es -1.

\n

El tercer método importante que tiene el store es subscribe, que se utiliza para crear funciones callback que el store llama cuando cambia su estado.

\n

Si, por ejemplo, añadiéramos la siguiente función para suscribirnos, todos los cambios en el store se imprimirían en la consola.

\n
store.subscribe(() => {\n  const storeNow = store.getState()\n  console.log(storeNow)\n})
\n

entonces el código

\n
// ...\n\nconst store = createStore(counterReducer)\n\nstore.subscribe(() => {  const storeNow = store.getState()  console.log(storeNow)})\nstore.dispatch({ type: 'INCREMENT' })store.dispatch({ type: 'INCREMENT' })store.dispatch({ type: 'INCREMENT' })store.dispatch({ type: 'ZERO' })store.dispatch({ type: 'DECREMENT' })
\n

causaría que se imprima lo siguiente:

\n
1\n2\n3\n0\n-1
\n

El código de nuestra aplicación de contador es el siguiente. Todo el código se ha escrito en el mismo archivo, por lo que store está directamente disponible para el código React. Más adelante conoceremos mejores formas de estructurar el código React/Redux.

\n
import ReactDOM from 'react-dom/client'\nimport { createStore } from 'redux'\n\nconst counterReducer = (state = 0, action) => {\n  switch (action.type) {\n    case 'INCREMENT':\n      return state + 1\n    case 'DECREMENT':\n      return state - 1\n    case 'ZERO':\n      return 0\n    default:\n      return state\n  }\n}\n\nconst store = createStore(counterReducer)\n\nconst App = () => {\n  return (\n    <div>\n      <div>{store.getState()}</div>\n      <button onClick={() => store.dispatch({ type: 'INCREMENT' })}>\n        plus\n      </button>\n      <button onClick={() => store.dispatch({ type: 'DECREMENT' })}>\n        minus\n      </button>\n      <button onClick={() => store.dispatch({ type: 'ZERO' })}>\n        zero\n      </button>\n    </div>\n  )\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'))\n\nconst renderApp = () => {\n  root.render(<App />)\n}\n\nrenderApp()\nstore.subscribe(renderApp)
\n

Hay algunas cosas notables en el código.\nApp muestra el valor del contador solicitándolo al store con el método store.getState(). Los controladores de acciones de los botones envían (dispatch) las acciones correctas al store.

\n

Cuando se cambia el estado del store, React no puede volver a re-renderizar automáticamente la aplicación. Por lo tanto, hemos registrado una función renderApp , que renderiza toda la aplicación, para escuchar cambios en el store con el método store.subscribe. Ten en cuenta que tenemos que invocar inmediatamente al método renderApp. Sin la invocación, el primer renderizado de la aplicación nunca se produciría.

\n

Una nota sobre el uso de createStore

\n

Los más atentos notarán que el nombre de la función createStore está tachado. Si pasas el mouse sobre el nombre, aparecerá una explicación

\n\"mensaje\n

La explicación completa es la siguiente:

\n
\n

Recomendamos utilizar el método configureStore del paquete @reduxjs/toolkit, que reemplaza a createStore.

\n

Redux Toolkit es nuestro enfoque recomendado para escribir la lógica de Redux hoy, incluida la configuración de store, reducers, la obtención de datos y más.

\n

Para obtener más detalles, lea esta página de documentación de Redux: https://redux.js.org/introduction/why-rtk-is-redux-today

\n

configureStore de Redux Toolkit es una versión mejorada de createStore que simplifica la configuración y ayuda a evitar errores comunes.

\n

No deberías usar el paquete principal de redux por sí solo hoy en día, excepto con fines de aprendizaje. El método createStore del paquete core de redux no se eliminará, pero alentamos a todos los usuarios a migrar al uso de Redux Toolkit para todo el código de Redux.

\n
\n

Entonces, en lugar de la función createStore, se recomienda usar la función un poco más \"avanzada\" configureStore, y también la usaremos cuando nos hayamos hecho cargo de la funcionalidad básica de Redux.

\n

Nota adicional: createStore se define como \"obsoleto\", lo que generalmente significa que la función se eliminará en alguna versión más nueva de la librería. La explicación anterior y esta discusión revelan que createStore no se eliminará y se le ha dado el estado obsoleto, quizás por motivos ligeramente incorrectos. Por lo tanto, la función no está obsoleta, pero hoy en día existe una forma nueva y preferible de hacer casi lo mismo.

\n

Redux-notas

\n

Nuestro objetivo es modificar nuestra aplicación de notas para utilizar Redux para la gestión del estado. Sin embargo, primero cubramos algunos conceptos clave a través de una aplicación de notas simplificada.

\n

La primera versión de nuestra aplicación, escrita en el archivo main.jsx, se ve de la siguiente manera:

\n
import ReactDOM from 'react-dom/client'\nimport { createStore } from 'redux'\n\nconst noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      state.push(action.payload)\n      return state\n    default:\n      return state\n  }\n}\n\nconst store = createStore(noteReducer)\n\nstore.dispatch({\n  type: 'NEW_NOTE',\n  payload: {\n    content: 'the app state is in redux store',\n    important: true,\n    id: 1\n  }\n})\n\nstore.dispatch({\n  type: 'NEW_NOTE',\n  payload: {\n    content: 'state changes are made with actions',\n    important: false,\n    id: 2\n  }\n})\n\nconst App = () => {\n  return (\n    <div>\n      <ul>\n        {store.getState().map(note => (\n          <li key={note.id}>\n            {note.content} <strong>{note.important ? 'important' : ''}</strong>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'))\n\nconst renderApp = () => {\n  root.render(<App />)\n}\n\nrenderApp()\nstore.subscribe(renderApp)
\n

Hasta el momento la aplicación no tiene la funcionalidad para agregar nuevas notas, aunque es posible hacerlo enviando acciones NEW_NOTE.

\n

Ahora las acciones tienen un tipo y un campo payload (carga), que contiene la nota a agregar:

\n
{\n  type: 'NEW_NOTE',\n  payload: {\n    content: 'state changes are made with actions',\n    important: false,\n    id: 2\n  }\n}
\n

La elección del nombre del campo es arbitraria. La convención es que las acciones tengan exactamente dos campos, type diciendo el tipo y payload conteniendo los datos incluidos en la acción.

\n

Funciones puras, inmutables

\n

La versión inicial del reducer es muy sencilla:

\n
const noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      state.push(action.payload)\n      return state\n    default:\n      return state\n  }\n}
\n

El estado ahora es un Array. Las acciones de tipo NEW_NOTE hacen que se agregue una nueva nota al estado con el método push.

\n

La aplicación parece estar funcionando, pero el reducer que hemos declarado es malo. Rompe el supuesto básico de que los reducers deben ser funciones puras.

\n

Las funciones puras son aquellas que no causan ningún efecto secundario y siempre deben devolver la misma respuesta cuando se llaman con los mismos parámetros.

\n

Agregamos una nueva nota al estado con el método state.push(action.payload) que cambia el estado del objeto-estado. Esto no está permitido. El problema se resuelve fácilmente utilizando el método concat, que crea un nuevo array, que contiene todos los elementos del array anterior y el nuevo elemento:

\n
const noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      return state.concat(action.payload)    default:\n      return state\n  }\n}
\n

El estado de un reducer debe estar compuesto por objetos inmutables. Si hay un cambio en el estado, el objeto antiguo no se cambia, sino que se reemplaza por un objeto nuevo modificado. Esto es exactamente lo que hicimos con el nuevo reducer: el array anterior se reemplaza por el nuevo.

\n

Ampliemos nuestro reducer para que pueda manejar el cambio de importancia de una nota:

\n
{\n  type: 'TOGGLE_IMPORTANCE',\n  payload: {\n    id: 2\n  }\n}
\n

Dado que todavía no tenemos ningún código que utilice esta funcionalidad, estamos expandiendo el reducer en la forma 'test driven' (guiada por pruebas).

\n

Configurando el entorno de pruebas

\n

Tenemos que configurar primero la biblioteca de pruebas Vitest para el proyecto. Vamos a instalarla como una dependencia de desarrollo para la aplicación:

\n
npm install --save-dev vitest
\n

Expandamos package.json con un script para ejecutar las pruebas:

\n
{\n  // ...\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\",\n    \"lint\": \"eslint .\",\n    \"preview\": \"vite preview\",\n    \"test\": \"vitest\"  },\n  // ...\n}
\n

Para hacer las pruebas más fáciles, primero trasladaremos el código del reducer a su propio módulo, al archivo src/reducers/noteReducer.js:

\n
const noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      return state.concat(action.payload)\n    default:\n      return state\n  }\n}\n\nexport default noteReducer
\n

El archivo main.jsx cambia de la siguiente manera:

\n
import ReactDOM from 'react-dom/client'\nimport { createStore } from 'redux'\nimport noteReducer from './reducers/noteReducer'\nconst store = createStore(noteReducer)\n\n// ...
\n

También agregaremos la librería deep-freeze, que se puede usar para garantizar que el reducer se haya definido correctamente como una función inmutable.\nInstalemos la librería como una dependencia de desarrollo:

\n
npm install --save-dev deep-freeze
\n

Ahora estamos listos para escribir pruebas.

\n

Pruebas para noteReducer

\n

Comencemos creando una prueba para manejar la acción NEW_NOTE. La prueba, que definimos en el archivo src/reducers/noteReducer.test.js, tiene el siguiente contenido:

\n
import deepFreeze from 'deep-freeze'\nimport { describe, expect, test } from 'vitest'\nimport noteReducer from './noteReducer'\n\ndescribe('noteReducer', () => {\n  test('returns new state with action NEW_NOTE', () => {\n    const state = []\n    const action = {\n      type: 'NEW_NOTE',\n      payload: {\n        content: 'the app state is in redux store',\n        important: true,\n        id: 1\n      }\n    }\n\n    deepFreeze(state)\n    const newState = noteReducer(state, action)\n\n    expect(newState).toHaveLength(1)\n    expect(newState).toContainEqual(action.payload)\n  })\n})
\n

Ejecuta la prueba con npm test. La prueba asegura que el nuevo estado devuelto por el reducer es un array que contiene un solo elemento, que es el mismo objeto que el que está en el campo payload de la acción.

\n

El comando deepFreeze(state) asegura que el reducer no cambie el estado del store que se le dio como parámetro. Si el reducer usa el comando push para manipular el estado, la prueba no pasará

\n\"terminal\n

Ahora crearemos una prueba para la acción TOGGLE_IMPORTANCE:

\n
test('returns new state with action TOGGLE_IMPORTANCE', () => {\n  const state = [\n    {\n      content: 'the app state is in redux store',\n      important: true,\n      id: 1\n    },\n    {\n      content: 'state changes are made with actions',\n      important: false,\n      id: 2\n    }\n  ]\n\n  const action = {\n    type: 'TOGGLE_IMPORTANCE',\n    payload: {\n      id: 2\n    }\n  }\n\n  deepFreeze(state)\n  const newState = noteReducer(state, action)\n\n  expect(newState).toHaveLength(2)\n\n  expect(newState).toContainEqual(state[0])\n\n  expect(newState).toContainEqual({\n    content: 'state changes are made with actions',\n    important: true,\n    id: 2\n  })\n})
\n

Entonces la siguiente acción

\n
{\n  type: 'TOGGLE_IMPORTANCE',\n  payload: {\n    id: 2\n  }\n}
\n

tiene que cambiar la importancia de la nota con el id 2.

\n

El reducer se expande de la siguiente manera

\n
const noteReducer = (state = [], action) => {\n  switch(action.type) {\n    case 'NEW_NOTE':\n      return state.concat(action.payload)\n    case 'TOGGLE_IMPORTANCE': {      const id = action.payload.id      const noteToChange = state.find(n => n.id === id)      const changedNote = {        ...noteToChange,        important: !noteToChange.important      }      return state.map(note => (note.id !== id ? note : changedNote))    }    default:\n      return state\n  }\n}
\n

Creamos una copia de la nota cuya importancia ha cambiado con la sintaxis de la parte 2, y reemplazamos el estado con un nuevo estado que contiene todas las notas que no han cambiado y la copia de la nota cambiada changedNote.

\n

Recapitulemos lo que sucede en el código. Primero, buscamos un objeto de nota específico, cuya importancia queremos cambiar:

\n
const noteToChange = state.find(n => n.id === id)
\n

luego creamos un nuevo objeto, que es una copia de la nota original, solo el valor del campo important se ha cambiado a lo opuesto de lo que era:

\n
const changedNote = { \n  ...noteToChange, \n  important: !noteToChange.important \n}
\n

Entonces se devuelve un nuevo estado. Lo creamos tomando todas las notas del estado anterior, excepto la nota deseada, que reemplazamos con su copia ligeramente alterada:

\n
state.map(note => (note.id !== id ? note : changedNote))
\n

Array spread syntax

\n

Debido a que ahora tenemos pruebas bastante buenas para el reducer, podemos refactorizar el código de forma segura.

\n

Agregar una nueva nota crea el estado devuelto por la función de Arrays concat. Echemos un vistazo a cómo podemos lograr lo mismo usando la sintaxis array spread de JavaScript:

\n
const noteReducer = (state = [], action) => {\n  switch(action.type) {\n    case 'NEW_NOTE':\n      return [...state, action.payload]    case 'TOGGLE_IMPORTANCE': {\n      // ...\n    }\n    default:\n    return state\n  }\n}
\n

La sintaxis spread funciona de la siguiente manera. Si declaramos

\n
const numbers = [1, 2, 3]
\n

...numbers divide el array en elementos individuales, que se pueden colocar en otro array.

\n
[...numbers, 4, 5]
\n

y el resultado es un array [1, 2, 3, 4, 5].

\n

Si hubiéramos colocado el array en otro array sin el spread

\n
[numbers, 4, 5]
\n

el resultado habría sido [ [1, 2, 3], 4, 5].

\n

Cuando tomamos elementos de un array mediante la desestructuración, se usa una sintaxis similar para juntar el resto de los elementos:

\n
const numbers = [1, 2, 3, 4, 5, 6]\n\nconst [first, second, ...rest] = numbers\n\nconsole.log(first)     // prints 1\nconsole.log(second)   // prints 2\nconsole.log(rest)     // prints [3, 4, 5, 6]
\n
\n
\n

Ejercicios 6.1.-6.2.

\n

Hagamos una versión simplificada del ejercicio unicafe de la parte 1. Manejemos la administración del estado con Redux.

\n

Puedes tomar el código de este repositorio https://github.com/fullstack-hy2020/unicafe-redux para la base de tu proyecto.

\n

Comienza eliminando la configuración git del repositorio clonado e instalando dependencias

\n
cd unicafe-redux   // go to the directory of cloned repository\nrm -rf .git\nnpm install
\n

6.1: Unicafe Revisitado, paso 1

\n

Antes de implementar la funcionalidad de la UI(interfaz de usuario), implementemos la funcionalidad requerida por el store.

\n

Tenemos que guardar el número de cada tipo de feedback en el store, por lo que la forma del estado en el store es:

\n
{\n  good: 5,\n  ok: 4,\n  bad: 2\n}
\n

El proyecto tiene la siguiente base para un reducer:

\n
const initialState = {\n  good: 0,\n  ok: 0,\n  bad: 0\n}\n\nconst counterReducer = (state = initialState, action) => {\n  console.log(action)\n  switch (action.type) {\n    case 'GOOD':\n      return state\n    case 'OK':\n      return state\n    case 'BAD':\n      return state\n    case 'RESET':\n      return state\n    default:\n      return state\n  }\n}\n\nexport default counterReducer
\n

y una base para sus pruebas

\n
import deepFreeze from 'deep-freeze'\nimport { describe, expect, test } from 'vitest'\nimport counterReducer from './reducer'\n\ndescribe('unicafe reducer', () => {\n  const initialState = {\n    good: 0,\n    ok: 0,\n    bad: 0\n  }\n\n  test('should return a proper initial state when called with undefined state', () => {\n    const action = {\n      type: 'DO_NOTHING'\n    }\n\n    const newState = counterReducer(undefined, action)\n    expect(newState).toEqual(initialState)\n  })\n\n  test('good is incremented', () => {\n    const action = {\n      type: 'GOOD'\n    }\n    const state = initialState\n\n    deepFreeze(state)\n    const newState = counterReducer(state, action)\n    expect(newState).toEqual({\n      good: 1,\n      ok: 0,\n      bad: 0\n    })\n  })\n})
\n

Implementa el reducer y sus pruebas.

\n

En las pruebas, asegúrate de que el reducer sea una función inmutable con la librería deep-freeze.\nAsegúrate de que la primera prueba proporcionada pase, porque Redux espera que el reducer devuelva el estado original cuando se llama con un primer parámetro - que representa el estado previo - con el valor undefined.

\n

Comienza expandiendo el reducer para que pasen ambas pruebas. Luego agrega el resto de las pruebas y finalmente la funcionalidad que están probando.

\n

Un buen modelo para el reducer es el ejemplo anterior de redux-notas.

\n

6.2: Unicafe Revisitado, paso 2

\n

Ahora implementa la funcionalidad real de la aplicación.

\n

Tu aplicación puede tener una apariencia modesta, nada más se necesitan 3 botones y el número de calificaciones para cada tipo:

\n\"botones\n
\n
\n

Formulario no controlado

\n

Agreguemos la funcionalidad para agregar nuevas notas y cambiar su importancia:

\n
// ...\n\nconst generateId = () => Number((Math.random() * 1000000).toFixed(0))\nconst App = () => {\n  const addNote = event => {    event.preventDefault()    const content = event.target.note.value    event.target.note.value = ''    store.dispatch({      type: 'NEW_NOTE',      payload: {        content,        important: false,        id: generateId()      }    })  }\n  const toggleImportance = id => {    store.dispatch({      type: 'TOGGLE_IMPORTANCE',      payload: { id }    })  }\n  return (\n    <div>\n      <form onSubmit={addNote}>        <input name=\"note\" />         <button type=\"submit\">add</button>      </form>      <ul>\n        {store.getState().map(note => (\n          <li key={note.id} onClick={() => toggleImportance(note.id)}>            {note.content} <strong>{note.important ? 'important' : ''}</strong>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\n// ...
\n

La implementación de ambas funcionalidades es sencilla. Cabe señalar que no hemos vinculado el estado de los campos del formulario al estado del componente App como lo hicimos anteriormente. React llama a este tipo de formulario no controlado.

\n
\n

Los formularios no controlados tienen ciertas limitaciones (por ejemplo, no son posibles los mensajes de error dinámicos o la desactivación del botón de envío en función de input). Sin embargo, son adecuados para nuestras necesidades actuales.

\n
\n

Puedes leer más sobre formularios no controlados aquí.

\n

El método para agregar nuevas notas es simple, simplemente envía la acción para agregar notas:

\n
addNote = event => {\n  event.preventDefault()\n  const content = event.target.note.value\n  event.target.note.value = ''\n  store.dispatch({\n    type: 'NEW_NOTE',\n    payload: {\n      content,\n      important: false,\n      id: generateId()\n    }\n  })\n}
\n

Podemos obtener el contenido de la nueva nota directamente desde el campo del formulario. Debido a que el campo tiene un nombre, podemos acceder al contenido a través del objeto del evento event.target.note.value.

\n
const content = event.target.note.value
\n
<form onSubmit={addNote}>\n  <input name=\"note\" />  <button type=\"submit\">add</button>\n</form>
\n

La importancia de una nota se puede cambiar haciendo clic en su nombre. El controlador de eventos es muy simple:

\n
toggleImportance = id => {\n  store.dispatch({\n    type: 'TOGGLE_IMPORTANCE',\n    payload: { id }\n  })\n}
\n

Action creators

\n

Comenzamos a notar que, incluso en aplicaciones tan simples como la nuestra, usar Redux puede simplificar el código de la interfaz. Sin embargo, podemos hacerlo mucho mejor.

\n

En realidad, no es necesario que los componentes de React conozcan los tipos y formas de acción de Redux.\nSeparemos la creación de acciones en sus propias funciones:

\n
const createNote = content => {\n  return {\n    type: 'NEW_NOTE',\n    payload: {\n      content,\n      important: false,\n      id: generateId()\n    }\n  }\n}\n\nconst toggleImportanceOf = id => {\n  return {\n    type: 'TOGGLE_IMPORTANCE',\n    payload: { id }\n  }\n}
\n

Las funciones que crean acciones se denominan action creators (creadores de acciones).

\n

El componente App ya no tiene que saber nada sobre la representación interna de las acciones, solo obtiene la acción correcta llamando a la función creadora:

\n
const App = () => {\n  const addNote = event => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    store.dispatch(createNote(content))    \n  }\n  \n  const toggleImportance = id => {\n    store.dispatch(toggleImportanceOf(id))  }\n\n  // ...\n}
\n

Reenviando Redux-Store a varios componentes

\n

Aparte del reducer, nuestra aplicación está en un solo archivo. Esto, por supuesto, no es sensato, y deberíamos separar App en su propio módulo.

\n

Ahora la pregunta es, ¿cómo puede App acceder al store después de moverlo? Y en términos más generales, cuando un componente está compuesto por muchos componentes más pequeños, debe haber una forma para que todos los componentes accedan al store.\nHay varias formas de compartir el store redux con los componentes. Primero veremos la forma más nueva, y posiblemente la más fácil, usando la api de hooks de la librería react-redux.

\n

Primero instalamos react-redux

\n
npm install react-redux
\n

A continuación, organicemos el código de la aplicación de forma más sensata en varios archivos. Después de los cambios, main.jsx queda así:

\n
import ReactDOM from 'react-dom/client'\nimport { createStore } from 'redux'\nimport { Provider } from 'react-redux'\n\nimport App from './App'\nimport noteReducer from './reducers/noteReducer'\n\nconst store = createStore(noteReducer)\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <App />\n  </Provider>\n)
\n

Ten en cuenta que la aplicación ahora se define como un elemento secundario de un componente Provider (proveedor) proporcionado por la librería react-redux.\nEl store de la aplicación se entrega al Provider como su atributo store.

\n
const store = createStore(noteReducer)\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>    <App />\n  </Provider>)
\n

La definición de los action creators se ha movido al archivo reducers/noteReducer.js donde se define el reducer. El archivo se ve así:

\n
const noteReducer = (state = [], action) => {\n  switch (action.type) {\n    case 'NEW_NOTE':\n      return [...state, action.payload]\n    case 'TOGGLE_IMPORTANCE': {\n      const id = action.payload.id\n      const noteToChange = state.find(n => n.id === id)\n      const changedNote = {\n        ...noteToChange,\n        important: !noteToChange.important\n      }\n      return state.map(note => (note.id !== id ? note : changedNote))\n    }\n    default:\n      return state\n  }\n}\n\nconst generateId = () =>\n  Number((Math.random() * 1000000).toFixed(0))\n\nexport const createNote = (content) => {\n  return {\n    type: 'NEW_NOTE',\n    payload: {\n      content,\n      important: false,\n      id: generateId()\n    }\n  }\n}\n\nexport const toggleImportanceOf = (id) => {\n  return {\n    type: 'TOGGLE_IMPORTANCE',\n    payload: { id }\n  }\n}\n\nexport default noteReducer
\n

Si la aplicación tiene muchos componentes que necesitan el store, el componente App debe pasar store como props a todos esos componentes.

\n

El módulo ahora tiene varios comandos de export.

\n

La función del reducer todavía se devuelve con el comando de export default, por lo que el reducer se puede importar de la forma habitual:

\n
import noteReducer from './reducers/noteReducer'
\n

Un módulo solo puede tener un default export, pero varias exportaciones \"normales\"

\n
export const createNote = (content) => {\n  // ...\n}\n\nexport const toggleImportanceOf = (id) => { \n  // ...\n}
\n

Las funciones exportadas normalmente (no como los default) se pueden importar con la sintaxis de llaves:

\n
import { createNote } from '../../reducers/noteReducer'
\n

Código para el componente App

\n
import { createNote, toggleImportanceOf } from './reducers/noteReducer'\nimport { useSelector, useDispatch } from 'react-redux' \n\n\nconst App = () => {\n  const dispatch = useDispatch()\n  const notes = useSelector(state => state)\n\n  const addNote = (event) => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    dispatch(createNote(content))\n  }\n\n  const toggleImportance = (id) => {\n    dispatch(toggleImportanceOf(id))\n  }\n\n  return (\n    <div>\n      <form onSubmit={addNote}>\n        <input name=\"note\" /> \n        <button type=\"submit\">add</button>\n      </form>\n      <ul>\n        {notes.map(note => \n          <li\n            key={note.id} \n            onClick={() => toggleImportance(note.id)}\n          >\n            {note.content} <strong>{note.important ? 'important' : ''}</strong>\n          </li>\n        )}\n      </ul>\n    </div>\n  )\n}\n\nexport default App
\n

Hay algunas cosas a tener en cuenta en el código. Anteriormente, el código despachaba acciones invocando al método dispatch de redux-store:

\n
store.dispatch({\n  type: 'TOGGLE_IMPORTANCE',\n  payload: { id }\n})
\n

Ahora lo hace con la función dispatch del hook useDispatch.

\n
import { useSelector, useDispatch } from 'react-redux'\nconst App = () => {\n  const dispatch = useDispatch()  // ...\n\n  const toggleImportance = (id) => {\n    dispatch(toggleImportanceOf(id))  }\n\n  // ...\n}
\n

El hook useDispatch proporciona acceso a cualquier componente de React a la función dispatch de redux-store definida en main.jsx. Esto permite que todos los componentes realicen cambios en el estado de Redux store.

\n

El componente puede acceder a las notas almacenadas en el store con el hook useSelector de la librería react-redux.

\n
import { useSelector, useDispatch } from 'react-redux'\nconst App = () => {\n  // ...\n  const notes = useSelector(state => state)  // ...\n}
\n

useSelector recibe una función como parámetro. La función busca o selecciona datos del store de Redux.\nAquí necesitamos todas las notas, por lo que nuestra función de selector devuelve el estado completo:

\n
state => state
\n

que es una abreviatura de

\n
(state) => {\n  return state\n}
\n

Por lo general, las funciones de selector son un poco más interesantes y solo devuelven partes seleccionadas del contenido del store redux. Por ejemplo, podríamos devolver solo notas marcadas como importantes:

\n
const importantNotes = useSelector(state => state.filter(note => note.important))
\n

La versión actual de la aplicación se puede encontrar en GitHub, en la rama part6-0.

\n

Más componentes

\n

Separemos el formulario responsable de crear una nueva nota en su propio componente en el archivo src/components/NoteForm.jsx:

\n
import { useDispatch } from 'react-redux'\nimport { createNote } from '../reducers/noteReducer'\n\nconst NoteForm = () => {\n  const dispatch = useDispatch()\n\n  const addNote = (event) => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    dispatch(createNote(content))\n  }\n\n  return (\n    <form onSubmit={addNote}>\n      <input name=\"note\" />\n      <button type=\"submit\">add</button>\n    </form>\n  )\n}\n\nexport default NoteForm
\n

A diferencia del código de React que hicimos sin Redux, el controlador de eventos para cambiar el estado de la aplicación (que ahora vive en Redux) se ha movido de App a un componente hijo. La lógica para cambiar el estado en Redux todavía está claramente separada de toda la parte de React de la aplicación.

\n

También separaremos la lista de notas y mostraremos una sola nota en sus propios componentes. Coloquemos ambos en el archivo src/components/Notes.jsx:

\n
import { useDispatch, useSelector } from 'react-redux'\nimport { toggleImportanceOf } from '../reducers/noteReducer'\n\nconst Note = ({ note, handleClick }) => {\n  return (\n    <li onClick={handleClick}>\n      {note.content}\n      <strong> {note.important ? 'important' : ''}</strong>\n    </li>\n  )\n}\n\nconst Notes = () => {\n  const dispatch = useDispatch()\n  const notes = useSelector(state => state)\n\n  return (\n    <ul>\n      {notes.map(note => (\n        <Note\n          key={note.id}\n          note={note}\n          handleClick={() => dispatch(toggleImportanceOf(note.id))}\n        />\n      ))}\n    </ul>\n  )\n}\n\nexport default Notes
\n

La lógica para cambiar la importancia de una nota ahora está en el componente que administra la lista de notas.

\n

Solo queda una pequeña cantidad de código en el archivo App.jsx:

\n
import NoteForm from './components/NoteForm'\nimport Notes from './components/Notes'\n\nconst App = () => {\n  return (\n    <div>\n      <NoteForm />\n      <Notes />\n    </div>\n  )\n}\n\nexport default App
\n

Note, responsable de representar una sola nota, es muy simple y no es consciente de que el controlador de eventos que obtiene como props despacha una acción. Este tipo de componentes se denominan presentacionales en la terminología de React.

\n

Notes, por otro lado, es un componente contenedor, ya que contiene cierta lógica de aplicación: define lo que hacen los controladores de eventos de los componentes Note y coordina la configuración de los componentes presentacionales, es decir, los Notes.

\n

El código de la aplicación Redux se puede encontrar en GitHub, en la rama part6-1.

\n
\n
\n

Ejercicios 6.3.-6.8.

\n

Hagamos una nueva versión de la aplicación de votación de anécdotas de la parte 1. Toma el proyecto de este repositorio https://github.com/fullstack-hy2020/redux-anecdotes como base de tu solución.

\n

Si clonas el proyecto en un repositorio de git existente, elimina la configuración de git de la aplicación clonada:

\n
cd redux-anecdotes  // go to the cloned repository\nrm -rf .git
\n

La aplicación se puede iniciar como de costumbre, pero primero debes instalar las dependencias:

\n
npm install\nnpm run dev
\n

Después de completar estos ejercicios, tu aplicación debería verse así:

\n\"navegador\n

6.3: Anécdotas, paso 1

\n

Implementa la funcionalidad para votar anécdotas. La cantidad de votos debe guardarse en una store de Redux.

\n

6.4: Anécdotas, paso 2

\n

Implementa la funcionalidad para agregar nuevas anécdotas.

\n

Puedes mantener el formulario no controlado, como hicimos antes.

\n

6.5: Anécdotas, paso 3

\n

Asegúrate de que las anécdotas estén ordenadas por número de votos.

\n

6.6: Anécdotas, paso 4

\n

Si aún no lo has hecho, separa la creación de objetos de acción en funciones action creator y colócalas en el archivo src/reducers/anecdoteReducer.js, como hemos hecho desde la sección action creators.

\n

6.7: Anécdotas, paso 5

\n

Separa la creación de nuevas anécdotas en su propio componente llamado AnecdoteForm. Mueve toda la lógica para crear una nueva anécdota en este nuevo componente.

\n

6.8: Anécdotas, paso 6

\n

Separa el renderizado de la lista de anécdotas en su propio componente llamado AnecdoteList. Mueve toda la lógica relacionada con la votación de una anécdota a este nuevo componente.

\n

Ahora, el componente App debería verse así:

\n
import AnecdoteForm from './components/AnecdoteForm'\nimport AnecdoteList from './components/AnecdoteList'\n\nconst App = () => {\n  return (\n    <div>\n      <h2>Anecdotes</h2>\n      <AnecdoteList />\n      <AnecdoteForm />\n    </div>\n  )\n}\n\nexport default App
\n
\n
\n

Continuemos nuestro trabajo con la versión Redux simplificada de nuestra aplicación de notas.

\n

Para facilitar nuestro desarrollo, cambiemos nuestro reducer para que el store se inicialice con un estado que contenga un par de notas:

\n
const initialState = [  {    content: 'reducer defines how redux store works',    important: true,    id: 1,  },  {    content: 'state of store can contain any data',    important: false,    id: 2,  },]\nconst noteReducer = (state = initialState, action) => {  // ...\n}\n\n// ...\n\nexport default noteReducer
\n

Store con estado complejo

\n

Implementemos el filtrado de las notas que se muestran al usuario. La interfaz de usuario para los filtros se implementará con botones de radio:

\n\"botones\n

Comencemos con una implementación muy simple y directa:

\n
import NoteForm from './components/NoteForm'\nimport Notes from './components/Notes'\n\nconst App = () => {\n  const filterSelected = (value) => {    console.log(value)  }\n  return (\n    <div>\n      <NoteForm />\n      <div>        <input          type=\"radio\"          name=\"filter\"          onChange={() => filterSelected('ALL')}        />        all        <input          type=\"radio\"          name=\"filter\"          onChange={() => filterSelected('IMPORTANT')}        />        important        <input          type=\"radio\"          name=\"filter\"          onChange={() => filterSelected('NONIMPORTANT')}        />        nonimportant      </div>      <Notes />\n    </div>\n  )\n}
\n

Dado que el atributo name de todos los botones de radio es el mismo, estos forman un button group (grupo de botones) en el que solo se puede seleccionar una opción.

\n

Los botones tienen un controlador de cambios que actualmente solo imprime el string asociado con el botón en el que se hizo clic en la consola.

\n

En la siguiente sección, vamos a implementar el filtrado almacenando las notas y el valor del filtro en el store de redux. Cuando terminemos, nos gustaría que el estado del store se viera así:

\n
{\n  notes: [\n    { content: 'reducer defines how redux store works', important: true, id: 1},\n    { content: 'state of store can contain any data', important: false, id: 2}\n  ],\n  filter: 'IMPORTANT'\n}
\n

Solo el array de notas se almacenaba en el estado de la implementación anterior de nuestra aplicación. En la nueva implementación, el objeto de estado tiene dos propiedades, notes que contienen el array de notas y filter que contiene un string que indica qué notas deben mostrarse al usuario.

\n

Reducers combinados

\n

Podríamos modificar nuestro reducer actual para hacer frente a la nueva forma del estado. Sin embargo, una mejor solución en esta situación es definir un nuevo reducer separado para el estado del filtro:

\n
const filterReducer = (state = 'ALL', action) => {\n  switch (action.type) {\n    case 'SET_FILTER':\n      return action.payload\n    default:\n      return state\n  }\n}\n\nexport const filterChange = filter => {\n  return {\n    type: 'SET_FILTER',\n    payload: filter\n  }\n}\n\nexport default filterReducer
\n

Las acciones para cambiar el estado del filtro se ven así:

\n
{\n  type: 'SET_FILTER',\n  payload: 'IMPORTANT'\n}
\n

Podemos crear el reducer que nuestra aplicación realmente utilizara al combinar los dos reducers existentes con la función combineReducers.

\n

Definamos el reducer combinado en el archivo main.jsx:

\n
import ReactDOM from 'react-dom/client'\nimport { Provider } from 'react-redux'\nimport { createStore, combineReducers } from 'redux'\n\nimport App from './App'\nimport filterReducer from './reducers/filterReducer'\nimport noteReducer from './reducers/noteReducer'\n\nconst reducer = combineReducers({\n  notes: noteReducer,\n  filter: filterReducer\n})\n\nconst store = createStore(reducer)\n\nconsole.log(store.getState())\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <div />\n  </Provider>\n)
\n

Dado que nuestra aplicación se rompe por completo en este punto, renderizamos un elemento div vacío en lugar del componente App.

\n

El estado del store se imprime en la consola:

\n\"consola\n

Como podemos ver en el resultado, ¡el store tiene la forma exacta que queríamos!

\n

Echemos un vistazo más de cerca a cómo se crea el reducer combinado:

\n
const reducer = combineReducers({\n  notes: noteReducer,\n  filter: filterReducer,\n})
\n

El estado del store definido por este reducer es un objeto con dos propiedades: notes y filter. El valor de la propiedad notes es definido por noteReducer, que no tiene que lidiar con las otras propiedades del estado. Asimismo, la propiedad filter es administrada por filterReducer.

\n

Antes de realizar más cambios en el código, echemos un vistazo a cómo las diferentes acciones cambian el estado del store definido por el reducer combinado. Agreguemos lo siguiente al archivo main.jsx:

\n
// ...\n\nconst store = createStore(reducer)\n\nconsole.log(store.getState())\n\nimport { createNote } from './reducers/noteReducer'import { filterChange } from './reducers/filterReducer'\nstore.subscribe(() => console.log(store.getState()))store.dispatch(filterChange('IMPORTANT'))store.dispatch(createNote('combineReducers forms one reducer from many simple reducers'))\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <div />\n  </Provider>\n)
\n

Al simular la creación de una nota y cambiar el estado del filtro de esta manera, el estado del store se muestra en la consola después de cada cambio que se realiza en el store:

\n\"consola\n

En este punto es bueno darse cuenta de un pequeño pero importante detalle. Si agregamos un console log al comienzo de ambos reducers (noteReducer y filterReducer):

\n
const filterReducer = (state = 'ALL', action) => {\n  console.log('ACTION: ', action)  // ...\n}
\n

Según el resultado de la consola, uno podría tener la impresión de que cada acción se duplica:

\n\"consola\n

¿Hay algún bug en nuestro código? No. El reducer combinado funciona de tal manera que cada acción es controlada en cada parte del reducer combinado, o en otras palabras, cada reducer \"escucha\" a todas las acciones despachadas y hace algo con ellas si así se lo hemos instruido. Normalmente, solo un reducer está interesado en una acción determinada, pero hay situaciones en las que varios reducers cambian sus respectivas partes del estado en función de la misma acción.

\n

Terminando los filtros

\n

Terminemos la aplicación para que utilice el reducer combinado. Comenzamos cambiando la renderización de la aplicación y conectando el store a la aplicación en el archivo main.jsx:

\n
import ReactDOM from 'react-dom/client'\nimport { Provider } from 'react-redux'\nimport { createStore, combineReducers } from 'redux'\n\nimport App from './App'\nimport filterReducer from './reducers/filterReducer'\nimport noteReducer from './reducers/noteReducer'\n\nconst reducer = combineReducers({\n  notes: noteReducer,\n  filter: filterReducer\n})\n\nconst store = createStore(reducer)\n\nconsole.log(store.getState())\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <App />\n  </Provider>\n)
\n

A continuación, solucionemos un error causado por el código que espera que la store de aplicaciones sea un array de notas:

\n\"error\n

Es una solución fácil. Debido a que las notas están en el campo notes del store, solo tenemos que hacer un pequeño cambio en la función de selector:

\n
const Notes = () => {\n  const dispatch = useDispatch()\n  const notes = useSelector(state => state.notes)\n  return(\n    <ul>\n      {notes.map(note =>\n        <Note\n          key={note.id}\n          note={note}\n          handleClick={() => \n            dispatch(toggleImportanceOf(note.id))\n          }\n        />\n      )}\n    </ul>\n  )\n}
\n

Anteriormente, la función de selector devolvía el estado completo del store:

\n
const notes = useSelector(state => state)
\n

Y ahora devuelve solo su campo notes

\n
const notes = useSelector(state => state.notes)
\n

Extraigamos el filtro de visibilidad en su propio componente src/components/VisibilityFilter.jsx:

\n
import { useDispatch } from 'react-redux'\nimport { filterChange } from '../reducers/filterReducer'\n\nconst VisibilityFilter = () => {\n  const dispatch = useDispatch()\n\n  return (\n    <div>\n      <input\n        type=\"radio\"\n        name=\"filter\"\n        onChange={() => dispatch(filterChange('ALL'))}\n      />\n      all\n      <input\n        type=\"radio\"\n        name=\"filter\"\n        onChange={() => dispatch(filterChange('IMPORTANT'))}\n      />\n      important\n      <input\n        type=\"radio\"\n        name=\"filter\"\n        onChange={() => dispatch(filterChange('NONIMPORTANT'))}\n      />\n      nonimportant\n    </div>\n  )\n}\n\nexport default VisibilityFilter
\n

Con el nuevo componente, App se puede simplificar de la siguiente manera:

\n
import NoteForm from './components/NoteForm'\nimport Notes from './components/Notes'\nimport VisibilityFilter from './components/VisibilityFilter'\n\nconst App = () => {\n  return (\n    <div>\n      <NoteForm />\n      <VisibilityFilter />\n      <Notes />\n    </div>\n  )\n}\n\nexport default App
\n

La implementación es bastante sencilla. Al hacer clic en los diferentes radio buttons, cambia el estado de la propiedad filter del store.

\n

Cambiemos el componente Notes para incorporar el filtro:

\n
const Notes = () => {\n  const dispatch = useDispatch()\n  const notes = useSelector(state => {    if (state.filter === 'ALL') {      return state.notes    }    return state.filter === 'IMPORTANT'      ? state.notes.filter(note => note.important)      : state.notes.filter(note => !note.important)  })\n  return (\n    <ul>\n      {notes.map(note => (\n        <Note\n          key={note.id}\n          note={note}\n          handleClick={() => dispatch(toggleImportanceOf(note.id))}\n        />\n      ))}\n    </ul>\n  )\n}
\n

Solo realizamos cambios en la función de selector, que solía ser

\n
useSelector(state => state.notes)
\n

Simplifiquemos el selector desestructurando los campos del estado que recibe como parámetro:

\n
const notes = useSelector(({ filter, notes }) => {\n  if ( filter === 'ALL' ) {\n    return notes\n  }\n  return filter  === 'IMPORTANT' \n    ? notes.filter(note => note.important)\n    : notes.filter(note => !note.important)\n})
\n

Hay un pequeño defecto cosmético en nuestra aplicación. Aunque el filtro está configurado en ALL de forma predeterminada, el radio button asociado no está seleccionado. Naturalmente, este problema se puede solucionar, pero como se trata de un error desagradable pero, en última instancia, inofensivo, dejaremos la solución para más adelante.

\n

La versión actual de la aplicación se puede encontrar en GitHub, en la rama part6-2.

\n
\n
\n

Ejercicio 6.9

\n

6.9 Mejores Anécdotas, paso 7

\n

Implementa el filtrado para las anécdotas que se muestran al usuario.

\n\"navegador\n

Almacena el estado del filtro en el store de Redux. Se recomienda crear un nuevo reducer, action creators y un reducer combinado para el store utilizando la función combineReducers.

\n

Crea un nuevo componente Filter para mostrar los filtros. Puedes utilizar el siguiente código como punto de partida:

\n
const Filter = () => {\n  const handleChange = (event) => {\n    // input-field value is in variable event.target.value\n  }\n  const style = {\n    marginBottom: 10\n  }\n\n  return (\n    <div style={style}>\n      filter <input onChange={handleChange} />\n    </div>\n  )\n}\n\nexport default Filter
\n
\n
\n

Redux Toolkit y refactorizando la configuración del Store

\n

Como hemos visto hasta ahora, la implementación de la gestión del estado y la configuración de Redux requiere bastante esfuerzo. Esto se manifiesta, por ejemplo, en el código relacionado con el reducer y el action creator, que tiene un código un tanto repetitivo. Redux Toolkit es una librería que resuelve estos problemas comunes relacionados con Redux. La librería, por ejemplo, simplifica enormemente la configuración del store de Redux y ofrece una gran variedad de herramientas para facilitar la gestión del estado.

\n

Comencemos a usar Redux Toolkit en nuestra aplicación refactorizando el código existente. Primero, necesitaremos instalar la librería:

\n
npm install @reduxjs/toolkit
\n

A continuación, abre el archivo main.jsx que actualmente crea la store de Redux. En lugar de la función createStore de Redux, creemos el Store usando la función configureStore de Redux Toolkit:

\n
import ReactDOM from 'react-dom/client'\nimport { Provider } from 'react-redux'\nimport { configureStore } from '@reduxjs/toolkit'\nimport App from './App'\nimport filterReducer from './reducers/filterReducer'\nimport noteReducer from './reducers/noteReducer'\n\nconst store = configureStore({  reducer: {    notes: noteReducer,    filter: filterReducer  }})\nconsole.log(store.getState())\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <App />\n  </Provider>\n)
\n

Ya nos deshicimos de algunas líneas de código, ya no necesitamos la función combineReducers para crear el reducer del store. Pronto veremos que la función configureStore tiene muchos beneficios adicionales, como la integración sin esfuerzo de herramientas de desarrollo y muchas librerías de uso común sin necesidad de configuración adicional.

\n

Limpiemos aún más el archivo main.jsx moviendo el código relacionado con la creación del store de Redux a su propio archivo. Creemos un nuevo archivo src/store.js:

\n
import { configureStore } from '@reduxjs/toolkit'\n\nimport noteReducer from './reducers/noteReducer'\nimport filterReducer from './reducers/filterReducer'\n\nconst store = configureStore({\n  reducer: {\n    notes: noteReducer,\n    filter: filterReducer\n  }\n})\n\nexport default store
\n

Después de los cambios, el contenido del archivo main.jsx es el siguiente:

\n
import ReactDOM from 'react-dom/client'\nimport { Provider } from 'react-redux'\n\nimport App from './App'\nimport store from './store'\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  <Provider store={store}>\n    <App />\n  </Provider>\n)
\n

Redux Toolkit y refactorizando los reducers

\n

Pasemos a refactorizar los reducers, lo que trae consigo los beneficios de Redux Toolkit. Con Redux Toolkit, podemos crear fácilmente reducers y action creators relacionados utilizando la función createSlice. Podemos usar la función createSlice para refactorizar el reducer y los action creators en el archivo reducers/noteReducer.js de la siguiente manera:

\n
import { createSlice } from '@reduxjs/toolkit'\nconst initialState = [\n  {\n    content: 'reducer defines how redux store works',\n    important: true,\n    id: 1,\n  },\n  {\n    content: 'state of store can contain any data',\n    important: false,\n    id: 2,\n  },\n]\n\nconst generateId = () =>\n  Number((Math.random() * 1000000).toFixed(0))\n\nconst noteSlice = createSlice({  name: 'notes',  initialState,  reducers: {    createNote(state, action) {      const content = action.payload      state.push({        content,        important: false,        id: generateId(),      })    },    toggleImportanceOf(state, action) {      const id = action.payload      const noteToChange = state.find(n => n.id === id)      const changedNote = {         ...noteToChange,         important: !noteToChange.important       }      return state.map(note =>        note.id !== id ? note : changedNote       )         }  },})\nexport const { createNote, toggleImportanceOf } = noteSlice.actionsexport default noteSlice.reducer
\n

El parámetro name de la función createSlice define el prefijo que se utiliza en los valores de tipo de la acción. Por ejemplo, la acción createNote definida más adelante tendrá el valor de tipo notes/createNote. Es una buena práctica dar al parámetro un valor que sea único entre los reducers. De esta forma no habrá colisiones inesperadas entre los valores de tipo de acción de la aplicación.\nEl parámetro initialState define el estado inicial del reducer.\nEl parámetro reducers toma al propio reducer como un objeto, cuyas funciones manejan los cambios de estado causados por ciertas acciones. Ten en cuenta que action.payload en la función contiene el argumento proporcionado al llamar al creador de la acción:

\n
dispatch(createNote('Redux Toolkit is awesome!'))
\n

Esta llamada a dispatch equivale a enviar el siguiente objeto:

\n
dispatch({ type: 'notes/createNote', payload: 'Redux Toolkit is awesome!' })
\n

Si has prestado atención, es posible que hayas notado que dentro de la acción createNote, parece suceder algo que viola el principio de inmutabilidad de los reducers mencionado anteriormente:

\n
createNote(state, action) {\n  const content = action.payload\n\n  state.push({\n    content,\n    important: false,\n    id: generateId(),\n  })\n}
\n

Estamos mutando el array del argumento state al llamar al método push en lugar de devolver una nueva instancia del array. ¿De qué se trata todo esto?

\n

Redux Toolkit utiliza la librería Immer con reducers creados por la función createSlice, lo que hace posible mutar el argumento state dentro del reducer. Immer usa el estado mutado para producir un nuevo estado inmutable y, por lo tanto, los cambios de estado permanecen inmutables. Ten en cuenta que state se puede cambiar sin \"mutarlo\", como hemos hecho con la acción toggleImportanceOf. En este caso, la función devuelve el nuevo estado directamente. Sin embargo, mutar el estado a menudo será útil, especialmente cuando se necesita actualizar un estado complejo.

\n

La función createSlice devuelve un objeto que contiene al reducer así como a los action creators definidos por el parámetro reducers. Se puede acceder al reducer mediante la propiedad noteSlice.reducer, mientras que a los action creators mediante la propiedad noteSlice.actions. Podemos producir las exportaciones del archivo de la siguiente manera:

\n
const noteSlice = createSlice({\n  // ...\n})\n\nexport const { createNote, toggleImportanceOf } = noteSlice.actionsexport default noteSlice.reducer
\n

Las importaciones en otros archivos funcionarán igual que antes:

\n
import noteReducer, { createNote, toggleImportanceOf } from './reducers/noteReducer'
\n

Necesitamos modificar los nombres de los tipos de las acciones en las pruebas debido a las convenciones de ReduxToolkit:

\n
import deepFreeze from 'deep-freeze'\nimport { describe, expect, test } from 'vitest'\nimport noteReducer from './noteReducer'\n\ndescribe('noteReducer', () => {\n  test('returns new state with action notes/createNote', () => {    const state = []\n    const action = {\n      type: 'notes/createNote',      payload: 'the app state is in redux store'    }\n\n    deepFreeze(state)\n    const newState = noteReducer(state, action)\n\n    expect(newState).toHaveLength(1)\n    expect(newState.map(note => note.content)).toContainEqual(action.payload)  })\n})\n\ntest('returns new state with action notes/toggleImportanceOf', () => {  const state = [\n    {\n      content: 'the app state is in redux store',\n      important: true,\n      id: 1\n    },\n    {\n      content: 'state changes are made with actions',\n      important: false,\n      id: 2\n    }\n  ]\n\n  const action = {\n    type: 'notes/toggleImportanceOf',    payload: 2  }\n\n  deepFreeze(state)\n  const newState = noteReducer(state, action)\n\n  expect(newState).toHaveLength(2)\n\n  expect(newState).toContainEqual(state[0])\n\n  expect(newState).toContainEqual({\n    content: 'state changes are made with actions',\n    important: true,\n    id: 2\n  })\n})
\n

Puedes encontrar el código de nuestra aplicación actual en su totalidad en la rama part6-3 de este repositorio de GitHub.

\n

Redux Toolkit y console.log

\n

Como hemos aprendido, console.log es una herramienta extremadamente poderosa, por lo general siempre nos salva de problemas.

\n

Intentemos imprimir el estado del store de Redux en la consola en medio del reducer creado con la función createSlice:

\n
const noteSlice = createSlice({\n  name: 'notes',\n  initialState,\n  reducers: {\n    // ...\n    toggleImportanceOf(state, action) {\n      const id = action.payload\n\n      const noteToChange = state.find(n => n.id === id)\n\n      const changedNote = { \n        ...noteToChange, \n        important: !noteToChange.important \n      }\n\n      console.log(state)\n      return state.map(note =>\n        note.id !== id ? note : changedNote \n      )     \n    }\n  },\n})
\n

Lo siguiente se imprime en la consola

\n\"consola\n

Lo que vemos es interesante pero no muy útil. Esto tiene que ver con la librería Immer que mencionamos anteriormente y es utilizada por Redux Toolkit internamente para guardar el estado de la Tienda.

\n

El estado se puede convertir a un formato legible por humanos utilizando la función current de la librería immer.

\n

Actualicemos las importaciones para incluir a la función \"current\" de la librería immer:

\n
import { current } from '@reduxjs/toolkit'
\n

Luego actualicemos el llamado a la función console.log:

\n
console.log(current(state))
\n

Ahora lo que imprime la consola es legible para humanos

\n\"consola\n

Redux DevTools

\n

Redux DevTools es una extension de Chrome, que ofrece útiles herramientas de desarrollo para Redux. Se puede usar, por ejemplo, para inspeccionar el estado del store de Redux y enviar acciones (dispatch) a través de la consola del navegador. Cuando el store se crea usando la función configureStore de Redux Toolkit, no se necesita ninguna configuración adicional para que Redux DevTools funcione.

\n

Una vez instalada la extension, al hacer clic en la pestaña de Redux en las herramientas de desarrollo del navegador, Redux DevTools debería abrirse:

\n\"redux\n

Puedes inspeccionar cómo el envío de una determinada acción cambia el estado haciendo clic en la acción:

\n\"devtools\n

También es posible enviar acciones (dispatch) a la store utilizando las herramientas de desarrollo:

\n\"devtools\n

El código actual de la aplicación se puede encontrar en GitHub, en la rama part6-3.

\n
\n
\n

Ejercicios 6.10.-6.13.

\n

Continuemos trabajando en la aplicación de anécdotas que comenzamos en el ejercicio 6.3, usando Redux Toolkit.

\n

6.10 Mejores Anécdotas, paso 8

\n

Instala Redux Toolkit en el proyecto. Mueve la creación del store de Redux a su propio archivo store.js y utiliza la función configureStore para crear el store.

\n

Cambia la definición del filter reducer y sus action creators para usar la función createSlice de Redux Toolkit.

\n

También, comienza a utilizar Redux DevTools para depurar el estado de la aplicación fácilmente.

\n

6.11 Mejores Anécdotas, paso 9

\n

Cambia también la definición de anecdote reducer y sus action creators para usar la función createSlice de Redux Toolkit.

\n

6.12 Mejores Anécdotas, paso 10

\n

La aplicación tiene el esqueleto del componente Notification listo para utilizarlo:

\n
const Notification = () => {\n  const style = {\n    border: 'solid',\n    padding: 10,\n    borderWidth: 1,\n    marginBottom: 10\n  }\n\n  return (\n    <div style={style}>\n      render here notification...\n    </div>\n  )\n}\n\nexport default Notification
\n

Extiende el componente para que muestre el mensaje almacenado en el store de Redux. Crea un reducer separado para la nueva funcionalidad mediante la función createSlice de Redux Toolkit.

\n

La aplicación no tiene que utilizar el componente Notification completamente en este punto de los ejercicios. Es suficiente con que la aplicación muestre el valor inicial establecido para el mensaje en el notificationReducer.

\n

6.13 Mejores Anécdotas, paso 11

\n

Extiende la aplicación para que utilice el componente Notification para mostrar un mensaje durante cinco segundos cuando el usuario vote por una anécdota o cree una nueva anécdota:

\n\"navegador\n

Se recomienda crear action creators independientes para configurar y eliminar notificaciones.

\n
\n
\n

Configuración de JSON Server

\n

Expandamos la aplicación, de modo que las notas se almacenen en el backend. Usaremos json-server, de la parte 2.

\n

El estado inicial de la base de datos se almacena en el archivo db.json, que se coloca en la raíz del proyecto:

\n
{\n  \"notes\": [\n    {\n      \"content\": \"the app state is in redux store\",\n      \"important\": true,\n      \"id\": 1\n    },\n    {\n      \"content\": \"state changes are made with actions\",\n      \"important\": false,\n      \"id\": 2\n    }\n  ]\n}
\n

Instalaremos json-server en nuestro proyecto...

\n
npm install json-server --save-dev
\n

y agregaremos la siguiente línea a la parte de scripts del archivo package.json

\n
\"scripts\": {\n  \"server\": \"json-server -p 3001 db.json\",\n  // ...\n}
\n

Ahora iniciemos json-server con el comando npm run server.

\n

Fetch API

\n

En el desarrollo de software, a menudo es necesario considerar si una cierta funcionalidad debe implementarse usando una librería externa o si es mejor utilizar las soluciones nativas proporcionadas por el entorno. Ambos enfoques tienen sus propias ventajas y desafíos.

\n

En las partes anteriores de este curso, usamos la librería Axios para hacer peticiones HTTP. Ahora, exploremos una forma alternativa de hacer peticiones HTTP usando la Fetch API nativa.

\n

Es típico que una librería externa como Axios se implemente usando otras librerías externas. Por ejemplo, si instalas Axios en tu proyecto con el comando npm install axios, la salida de la consola será:

\n
$ npm install axios\n\nadded 23 packages, and audited 302 packages in 1s\n\n71 packages are looking for funding\n  run `npm fund` for details\n\nfound 0 vulnerabilities
\n

Por lo tanto, además de la librería Axios, el comando instalaría más de 20 paquetes npm adicionales que Axios necesita para funcionar.

\n

La Fetch API proporciona una forma similar de hacer peticiones HTTP como Axios, pero usar la Fetch API no requiere instalar ninguna librería externa. El mantenimiento de la aplicación se vuelve más fácil cuando hay menos librerías que actualizar, y la seguridad también mejora porque la superficie de ataque potencial de la aplicación se reduce. La seguridad y el mantenimiento de las aplicaciones se discute más a fondo en la parte 7 del curso.

\n

En la práctica, las peticiones se realizan usando la función fetch(). La sintaxis utilizada difiere algo de Axios. También notaremos pronto que Axios se ha encargado de algunas cosas por nosotros y nos ha facilitado la vida. Sin embargo, ahora usaremos la Fetch API, ya que es una solución nativa ampliamente utilizada que todo desarrollador Full Stack debería conocer.

\n

Obteniendo datos del backend

\n

Creemos un método para obtener datos del backend en el archivo src/services/notes.js:

\n
const baseUrl = 'http://localhost:3001/notes'\n\nconst getAll = async () => {\n  const response = await fetch(baseUrl)\n\n  if (!response.ok) {\n    throw new Error('Failed to fetch notes')\n  }\n\n  const data = await response.json()\n  return data\n}\n\nexport default { getAll }
\n

Examinemos más de cerca la implementación del método getAll. Las notas ahora se obtienen del backend llamando a la función fetch(), a la cual se le da la URL del backend como argumento. El tipo de petición no se define explícitamente, por lo que fetch realiza su acción predeterminada, que es una petición GET.

\n

Una vez que la respuesta ha llegado, se verifica el éxito de la petición usando la propiedad response.ok, y se lanza un error si es necesario:

\n
if (!response.ok) {\n  throw new Error('Failed to fetch notes')\n}
\n

El atributo response.ok se establece en true si la petición fue exitosa, es decir, el código de estado de la respuesta está entre 200 y 299. Para todos los demás códigos de estado, como 404 o 500, se establece en false.

\n

Ten en cuenta que fetch no lanza automáticamente un error incluso si el código de estado de la respuesta es, por ejemplo, 404. El manejo de errores debe implementarse manualmente, como lo hemos hecho aquí.

\n

Si la petición es exitosa, los datos contenidos en la respuesta se convierten a formato JSON:

\n
const data = await response.json()
\n

fetch no convierte automáticamente ningún dato incluido en la respuesta a formato JSON; la conversión debe hacerse manualmente. También es importante notar que response.json() es un método asíncrono, por lo que se requiere la palabra clave await.

\n

Simplifiquemos aún más el código devolviendo directamente los datos devueltos por el método response.json():

\n
const getAll = async () => {\n  const response = await fetch(baseUrl)\n\n  if (!response.ok) {\n    throw new Error('Failed to fetch notes')\n  }\n\n  return await response.json()}
\n

Inicializando el store con datos obtenidos del servidor

\n

Modifiquemos ahora nuestra aplicación para que el estado de la aplicación se inicialice con las notas obtenidas del servidor.

\n

En el archivo noteReducer.js, cambiemos la inicialización del estado de las notas para que por defecto no haya notas:

\n
const noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],  // ...\n})
\n

Agreguemos un action creator llamado setNotes, que nos permita reemplazar directamente el array de notas. Podemos crear el action creator deseado usando la función createSlice de la siguiente manera:

\n
// ...\n\nconst noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],\n  reducers: {\n    createNote(state, action) {\n      const content = action.payload\n      state.push({\n        content,\n        important: false,\n        id: generateId()\n      })\n    },\n    toggleImportanceOf(state, action) {\n      const id = action.payload\n      const noteToChange = state.find(n => n.id === id)\n      const changedNote = {\n        ...noteToChange,\n        important: !noteToChange.important\n      }\n      return state.map(note => (note.id !== id ? note : changedNote))\n    },\n    setNotes(state, action) {      return action.payload    }  }\n})\n\nexport const { createNote, toggleImportanceOf, setNotes } = noteSlice.actionsexport default noteSlice.reducer
\n

Implementemos la inicialización de las notas en el componente App. Como es habitual al obtener datos de un servidor, usaremos el hook useEffect:

\n
import { useEffect } from 'react'import { useDispatch } from 'react-redux'\nimport NoteForm from './components/NoteForm'\nimport Notes from './components/Notes'\nimport VisibilityFilter from './components/VisibilityFilter'\nimport { setNotes } from './reducers/noteReducer'import noteService from './services/notes'\nconst App = () => {\n  const dispatch = useDispatch()\n  useEffect(() => {    noteService.getAll().then(notes => dispatch(setNotes(notes)))  }, [dispatch])\n  return (\n    <div>\n      <NoteForm />\n      <VisibilityFilter />\n      <Notes />\n    </div>\n  )\n}\n\nexport default App
\n

Enviando datos al backend

\n

A continuación, implementemos la funcionalidad para enviar una nueva nota al servidor. Esto también nos dará una oportunidad de practicar cómo hacer una petición POST usando el método fetch().

\n

Expandamos el código en src/services/notes.js que maneja la comunicación con el servidor de la siguiente manera:

\n
const baseUrl = 'http://localhost:3001/notes'\n\nconst getAll = async () => {\n  const response = await fetch(baseUrl)\n\n  if (!response.ok) {\n    throw new Error('Failed to fetch notes')\n  }\n\n  return await response.json()\n}\n\nconst createNew = async (content) => {  const response = await fetch(baseUrl, {    method: 'POST',    headers: { 'Content-Type': 'application/json' },    body: JSON.stringify({ content, important: false }),  })    if (!response.ok) {    throw new Error('Failed to create note')  }    return await response.json()}\nexport default { getAll, createNew }
\n

Examinemos más de cerca la implementación del método createNew. El primer parámetro de la función fetch() especifica la URL a la que se realiza la petición. El segundo parámetro es un objeto que define otros detalles de la petición, como el tipo de petición, encabezados y los datos enviados con la petición. Podemos aclarar aún más el código almacenando el objeto que define los detalles de la petición en una variable options separada:

\n
const createNew = async (content) => {\n  const options = {    method: 'POST',    headers: { 'Content-Type': 'application/json' },    body: JSON.stringify({ content, important: false }),  }    const response = await fetch(baseUrl, options)\n  if (!response.ok) {\n    throw new Error('Failed to create note')\n  }\n  \n  return await response.json()\n}
\n

Examinemos más de cerca el objeto options:

\n\n

Al igual que con una petición GET, el código de estado de la respuesta se verifica para detectar errores:

\n
if (!response.ok) {\n  throw new Error('Failed to create note')\n}
\n

Si la petición es exitosa, JSON Server devuelve la nota recién creada, para la cual también ha generado un id único. Sin embargo, los datos contenidos en la respuesta aún deben convertirse a formato JSON usando el método response.json():

\n
return await response.json()
\n

Luego modificaremos el componente de nuestra aplicación NoteForm para que una nueva nota se envíe al backend. El método addNote del componente cambiará ligeramente:

\n
import { useDispatch } from 'react-redux'\nimport { createNote } from '../reducers/noteReducer'\nimport noteService from '../services/notes'\nconst NoteForm = (props) => {\n  const dispatch = useDispatch()\n  \n  const addNote = async (event) => {    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    const newNote = await noteService.createNew(content)    dispatch(createNote(newNote))  }\n\n  return (\n    <form onSubmit={addNote}>\n      <input name=\"note\" />\n      <button type=\"submit\">add</button>\n    </form>\n  )\n}\n\nexport default NoteForm
\n

Cuando se crea una nueva nota en el backend llamando al método createNew(), el valor de retorno es un objeto que representa la nota, al cual el backend ha generado un id único. Por lo tanto, modifiquemos el action creator createNote definido en notesReducer.js de la siguiente manera:

\n
const noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],\n  reducers: {\n    createNote(state, action) {\n      state.push(action.payload)    },\n    // ..\n  },\n})
\n

El cambio de importancia de las notas podría implementarse utilizando el mismo principio, haciendo una llamada asíncrona al servidor y luego enviando una acción apropiada.

\n

El estado actual del código para la aplicación se puede encontrar en GitHub en la rama part6-4.

\n
\n
\n

Ejercicios 6.14.-6.15.

\n

6.14 Anécdotas y el Backend, paso 1

\n

Cuando la aplicación se inicie, obtén las anécdotas del backend implementado usando json-server. Usa la Fetch API para hacer la petición HTTP.

\n

Como datos de backend iniciales, puedes usar, por ejemplo, esto.

\n

6.15 Anécdotas y el Backend, paso 2

\n

Modifica la creación de nuevas anécdotas, de forma que las anécdotas se almacenen en el backend. Utiliza la Fetch API en tu implementación una vez más.

\n
\n
\n

Acciones asíncronas y Redux Thunk

\n

Nuestro enfoque es bastante bueno, pero no es muy bueno que la comunicación con el servidor suceda dentro de las funciones de los componentes. Sería mejor si la comunicación pudiera abstraerse de los componentes para que no tengan que hacer nada más que llamar al action creator apropiado. Como ejemplo, App inicializaría el estado de la aplicación de la siguiente manera:

\n
const App = () => {\n  const dispatch = useDispatch()\n\n  useEffect(() => {\n    dispatch(initializeNotes())\n  }, [dispatch]) \n  \n  // ...\n}
\n

y NoteForm crearía una nueva nota de la siguiente manera:

\n
const NoteForm = () => {\n  const dispatch = useDispatch()\n  \n  const addNote = async (event) => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    dispatch(createNote(content))\n  }\n\n  // ...\n}
\n

En esta implementación, ambos componentes enviarían una acción sin necesidad de saber sobre la comunicación con el servidor que sucede detrás de escena. Estos tipos de acciones asíncronas se pueden implementar utilizando la librería Redux Thunk. El uso de la librería no requiere ninguna configuración adicional o incluso instalación cuando el store de Redux se ha creado utilizando la función configureStore del kit de herramientas de Redux (Redux Toolkit).

\n

Con Redux Thunk, es posible implementar action creators que devuelven una función en lugar de un objeto. La función recibe los métodos dispatch y getState del store de Redux como parámetros. Esto permite, por ejemplo, implementaciones de action creators asíncronos, que primero esperan la finalización de una cierta operación asíncrona y luego despachan alguna acción, que cambia el estado del store.

\n

Podemos definir un action creator llamado initializeNotes en el archivo noteReducer.js, que obtiene las notas iniciales del servidor, de la siguiente manera:

\n
import { createSlice } from '@reduxjs/toolkit'\nimport noteService from '../services/notes'\nconst noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],\n  reducers: {\n    createNote(state, action) {\n      state.push(action.payload)\n    },\n    toggleImportanceOf(state, action) {\n      const id = action.payload\n      const noteToChange = state.find((n) => n.id === id)\n      const changedNote = {\n        ...noteToChange,\n        important: !noteToChange.important,\n      }\n      return state.map((note) => (note.id !== id ? note : changedNote))\n    },\n    setNotes(state, action) {\n      return action.payload\n    },\n  },\n})\n\nconst { setNotes } = noteSlice.actions\nexport const initializeNotes = () => {  return async (dispatch) => {    const notes = await noteService.getAll()    dispatch(setNotes(notes))  }}\nexport const { createNote, toggleImportanceOf } = noteSlice.actions\nexport default noteSlice.reducer
\n

En su función interna, es decir, en la acción asíncrona, la operación primero obtiene todas las notas del servidor y luego despacha la acción para agregarlas al store. Es importante destacar que Redux pasa automáticamente una referencia al método dispatch como argumento a la función, por lo que el action creator initializeNotes no requiere ningún parámetro.

\n

El action creator setNotes ya no se exporta fuera del módulo, ya que el estado inicial de las notas ahora se establecerá usando el action creator asíncrono initializeNotes que creamos. Sin embargo, todavía usamos el action creator setNotes dentro del módulo.

\n

El componente App ahora puede definirse de la siguiente manera:

\n
import { useEffect } from 'react'\nimport { useDispatch } from 'react-redux'\n\nimport NoteForm from './components/NoteForm'\nimport Notes from './components/Notes'\nimport VisibilityFilter from './components/VisibilityFilter'\nimport { initializeNotes } from './reducers/noteReducer'\nconst App = () => {\n  const dispatch = useDispatch()\n\n  useEffect(() => {\n    dispatch(initializeNotes())  }, [dispatch])\n\n  return (\n    <div>\n      <NoteForm />\n      <VisibilityFilter />\n      <Notes />\n    </div>\n  )\n}\n\nexport default App
\n

La solución es bastante elegante. La lógica de inicialización de las notas se ha separado completamente del componente React.

\n

A continuación, creemos un action creator asíncrono llamado appendNote:

\n
import { createSlice } from '@reduxjs/toolkit'\nimport noteService from '../services/notes'\n\nconst noteSlice = createSlice({\n  name: 'notes',\n  initialState: [],\n  reducers: {\n    createNote(state, action) {\n      state.push(action.payload)\n    },\n    toggleImportanceOf(state, action) {\n      const id = action.payload\n      const noteToChange = state.find((n) => n.id === id)\n      const changedNote = {\n        ...noteToChange,\n        important: !noteToChange.important,\n      }\n      return state.map((note) => (note.id !== id ? note : changedNote))\n    },\n    setNotes(state, action) {\n      return action.payload\n    },\n  },\n})\n\nconst { createNote, setNotes } = noteSlice.actions\nexport const initializeNotes = () => {\n  return async (dispatch) => {\n    const notes = await noteService.getAll()\n    dispatch(setNotes(notes))\n  }\n}\n\nexport const appendNote = (content) => {  return async (dispatch) => {    const newNote = await noteService.createNew(content)    dispatch(createNote(newNote))  }}\nexport const { toggleImportanceOf } = noteSlice.actions\nexport default noteSlice.reducer
\n

El principio es el mismo una vez más. Primero se realiza una operación asíncrona y, una vez completada, se despacha una acción que actualiza el estado del store. El action creator createNote ya no se exporta fuera del archivo; solo se usa internamente en la implementación de la función appendNote.

\n

El componente NoteForm cambia de la siguiente manera:

\n
import { useDispatch } from 'react-redux'\nimport { appendNote } from '../reducers/noteReducer'\nconst NoteForm = () => {\n  const dispatch = useDispatch()\n\n  const addNote = async (event) => {\n    event.preventDefault()\n    const content = event.target.note.value\n    event.target.note.value = ''\n    dispatch(appendNote(content))  }\n\n  return (\n    <form onSubmit={addNote}>\n      <input name=\"note\" />\n      <button type=\"submit\">add</button>\n    </form>\n  )\n}
\n

El estado actual del código de la aplicación se puede encontrar en GitHub en la rama part6-5.

\n

Redux Toolkit ofrece una gran cantidad de herramientas para simplificar la administración de estado asíncrono. Las herramientas adecuadas para este caso de uso son, por ejemplo, la función createAsyncThunk y la API RTK Query.

\n
\n
\n

Ejercicios 6.16.-6.19.

\n

6.16 Anécdotas y el Backend, paso 3

\n

Modifica la inicialización de la store de Redux para que suceda utilizando action creators asíncronos, los cuales son posibles gracias a la librería Redux Thunk.

\n

6.17 Anécdotas y el Backend, paso 4

\n

También modifica la creación de una nueva anécdota para que suceda usando action creators asíncronos, hecho posible por la librería Redux Thunk.

\n

6.18 Anécdotas y el Backend, paso 5

\n

La votación aún no guarda los cambios en el backend. Arregla la situación con la ayuda de la librería Redux Thunk y la Fetch API.

\n

6.19 Anécdotas y el Backend, paso 6

\n

La creación de notificaciones sigue siendo un poco tediosa, ya que hay que realizar dos acciones y utilizar la función setTimeout:

\n
dispatch(setNotification(`new anecdote '${content}'`))\nsetTimeout(() => {\n  dispatch(clearNotification())\n}, 5000)
\n

Crea un action creator, que te permita proveer la notificación de la siguiente manera:

\n
dispatch(setNotification(`you voted '${anecdote.content}'`, 10))
\n

El primer parámetro es el texto que sera renderizado y el segundo parámetro es el tiempo durante el cual se mostrara la notificación en segundos.

\n

Implementa el uso de esta notificación mejorada en tu aplicación.

\n
","frontmatter":{"mainImage":{"publicURL":"/static/a3b7bc3fafcb5b47227616e1343970e5/part-6.svg"},"part":6,"letter":"d","lang":"es"}}},"pageContext":{"part":6,"letter":"d","lang":"es"}},"staticQueryHashes":["3128451518"]}