Advertisement
  1. Code
  2. React Native

Usar Redux en una aplicación de React Native

by
Read Time:8 minsLanguages:

Spanish (Español) translation by Esther (you can also view the original English article)

Redux es una biblioteca para la gestión del estado que asegura que la lógica de la aplicación está bien organizada y que las aplicaciones funcionan como se espera. Redux facilita la comprensión del código de la aplicación en cuanto a cuándo, dónde, por qué y cómo se actualiza el estado de la aplicación.

Redux está compuesto por las siguientes partes clave:

  • acciones
  • reductores
  • tienda
  • despacho
  • selector

En este post, miraremos cada parte de la arquitectura del Redux por turnos.

Acciones y creadores de acción

Una acción es un objeto JavaScript plano que tiene un campo de tipo y una carga útil opcional. También se puede considerar como un evento que describe algo que ha sucedido.

Los creadores de acción son solo funciones que crean y devuelven objetos de acción.

Reductores

Un reductor es también una función que recibe el estado actual y un objeto de acción, actualiza el estado si es necesario y devuelve el nuevo estado. Un reductor no puede modificar el estado existente, sino que copia el estado existente y cambia los valores copiados. En otras palabras, el reductor debe ser una función pura.

Aquí hay un ejemplo.

Tienda

Una tienda es un objeto que almacena el estado actual de una aplicación Redux. El estado inicial del almacén se crea pasando un reductor a la función configureStore.

Para obtener el estado actual de una tienda, utiliza la función getState() como se indica arriba.

Despacho y selectores

dispatch() es un método de almacenamiento Redux y se utiliza para actualizar el estado pasando un objeto de acción. Aquí, creamos una acción task/taskAdded con el creador de la acción addTask(), y luego la pasamos al método dispatch().

Los selectores se utilizan para leer los datos de una tienda.

Tutorial sobre el uso de Redux con Reactact Native

En este tutorial de React Native Redux, desarrollarás una aplicación que permite al usuario elegir entre un determinado conjunto de temas. La aplicación contendrá dos pantallas, y también aprenderás a navegar entre ellas usando react-navigation.

Crear una nueva aplicación de React

Crear un nuevo proyecto usando la herramienta Expo CLI.

Actualmente, tienes un solo componente, App.js que muestra un mensaje de bienvenida.

Crear dos nuevos componentes en Home.js y Subjects.js. El componente home será la primera pantalla que vea un usuario, y el componente subjects mostrará todos los temas de nuestra aplicación. Copia el código de App.js y añádelo a Home.js y Subjects.js.

Modifica Home.js y Subjects.js para usar Home y Subjects en lugar de la clase App.

Subects.js debe tener un aspecto similar.

Navegando entre las pantallas

Actualmente, no hay forma de navegar entre las dos pantallas. El navegador de la pila permite a tu aplicación pasar de una pantalla a otra donde cada nueva pantalla se coloca en la parte superior de una pila.

Primero, instala @react-navigation/native y sus dependencias.

Para un proyecto Expo-managed, instala lo siguiente.

Ve a App.js e importa react-native-gesture-handler en la parte superior. También necesitas añadir NavigationContainer y createStackNavigator a App.js. Luego, para agregar capacidades de navegación, envuelve los componentes dentro de la clase App en un componente NavigationContainer.

Ahora el navegador es consciente de tus pantallas, y puedes proporcionar enlaces para la transición entre pantallas.

Redux en una aplicación React Native

Como mencionamos anteriormente, Redux es una herramienta de gestión de estados, y la usarás para gestionar todos los estados de la aplicación. Nuestra aplicación es un selector de temas donde el usuario elige los temas de una lista predefinida.

Primero, instala los paquetes Redux.

Una aplicación Redux cumple las siguientes condiciones:

  • El estado describe completamente la condición de la aplicación en cualquier momento.
  • La interfaz de usuario se muestra basada en el estado de la aplicación.

Por ejemplo, cuando un usuario hace clic en un botón, el estado se actualiza, y la interfaz de usuario muestra el cambio basado en el estado.

Crear un reductor

El reductor se encargará de mantener el estado de los subjects en todo momento.

Crea el archivo SubjectsReducer.js en el nivel de la raíz y añade el siguiente código.

En este archivo, se crea una variable INITIAL_STATE con todas las asignaturas del plan de estudios y se exporta el reductor de asignaturas como una propiedad llamada subjects. Hasta ahora, el reductor de materias no responde a ninguna acción, el estado no puede cambiar.

Crear una acción

Una acción tiene un tipo y una carga útil opcional. En este caso, el tipo será SELECT_SUBJECT, y la carga útil será el índice de la matriz de los subjects a seleccionar.

Crea el archivo SubjectsActions.js en el nivel raíz y añade el siguiente código.

Ahora, actualizaremos el reductor para responder a esta acción.

Añadir el reductor a la aplicación

Ahora, abre App.js y crea una nueva tienda para la aplicación usando la función createStore(). También ponemos ese almacén a disposición de los componentes de nuestra aplicación envolviéndolos en el componente <Provider>. Esto asegurará que todos los componentes hijos puedan acceder al estado de la tienda.

Añadir Redux a los componentes

Ahora veamos cómo hacer que los datos de estado estén disponibles para los componentes con la función connect(). Para usar connect(), necesitamos crear una función mapStateToProps, la cual mapeará el estado del almacén a los puntales en los dos componentes.

Abre Home.js, mapea el estado, y renderiza los valores para los subjects actuales (que se encontrarán en this.props.subjects.current). Además, agrega un botón para navegar al componente Subjects.

De manera similar, usaremos connect en el archivo Subjects.js para mapear el estado a las propiedades del componente.

También añadiremos el código para mostrar todos los subjects en el componente Subjects y un botón para navegar a la pantalla de inicio. También añadirá un botón que añadirá la acción addSubject a Subject.js. Aquí está cómo debería verse el método render() final en Subject.js:

La aplicación final debería verse así.

redux appredux appredux app

Conclusión

Redux es una herramienta valiosa, pero solo es útil cuando se usa de la manera correcta. Algunas de las situaciones en las que Redux podría ser útil incluyen código en el que está trabajando mucha gente o aplicaciones que contienen grandes cantidades de estado de aplicación.

En este tutorial, aprendiste a configurar una aplicación de React Native usando Redux.

Las mejores plantillas de aplicaciones de React Native en CodeCanyon

CodeCanyon es un mercado digital que ofrece la mejor colección de temas y plantillas de React Native. Con una plantilla de aplicaciones de React Native, puedes empezar a construir tus aplicaciones en el menor tiempo posible.

React Native app templatesReact Native app templatesReact Native app templates

Si tienes problemas para decidir qué plantilla de React Native en CodeCanyon es la adecuada para ti, este artículo debería ayudarte:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.