Usar Redux en una aplicación de React Native

() translation by (you can also view the original English article)

Redux es una biblioteca para la gestión del estado que asegura que la lógica de la aplicación está bien organizada y que las aplicaciones funcionan como se espera. Redux facilita la comprensión del código de la aplicación en cuanto a cuándo, dónde, por qué y cómo se actualiza el estado de la aplicación.

Redux está 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 acción

Una acción es un objeto JavaScript plano que tiene un campo de tipo y una carga útil opcional. También se puede considerar como un evento que describe algo que ha sucedido.

1	const addTaskAction = {
2	type: 'task/taskAdded'
3	,payload: 'Laundry'
4	}

Los creadores de acción son solo funciones que crean y devuelven objetos de acción.

const addTask = text => {
  return {
    type: 'task/taskAdded'',
    payload: text
  }
}

Reductores

Un reductor es también una función que recibe el estado actual y un objeto de acció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 función pura.

Aquí hay un ejemplo.

const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
  // Check to see if the reducer cares about this action
  if (action.type === 'counter/increment') {
    // If so, make a copy of `state`
    return {
      ...state,
      // and update the copy with the new value
      value: state.value + 1
    }
  }
  // otherwise return the existing state unchanged
  return state
}

Tienda

Una tienda es un objeto que almacena el estado actual de una aplicación Redux. El estado inicial del almacén se crea pasando un reductor a la función configureStore.

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({ reducer: counterReducer })

console.log(store.getState())

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

Despacho y selectores

dispatch() es un método de almacenamiento Redux y se utiliza para actualizar el estado pasando un objeto de acción. Aquí, creamos una acción task/taskAdded con el creador de la acción addTask(), y luego la pasamos al método dispatch().

1	store.dispatch(addTask('pick up laundry'))

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, desarrollarás una aplicación que permite al usuario elegir entre un determinado conjunto de temas. La aplicación contendrá dos pantallas, y también aprenderás a navegar entre ellas usando react-navigation.

Crear una nueva aplicación de React

Crear un nuevo proyecto usando la herramienta Expo CLI.

1	expo init ReduxApp

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 será la primera pantalla que vea un usuario, y el componente subjects mostrará todos los temas de nuestra aplicación. Copia el código de App.js y añ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.

//Home.js 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class Home extends React.Component {
  render() {
    //...
  }
}

// ...
export default Home;

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 aplicació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.

1	npm install @react-navigation/native

Para un proyecto Expo-managed, instala lo siguiente.

1	expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Ve a App.js e importa react-native-gesture-handler en la parte superior. También necesitas añadir NavigationContainer y createStackNavigator a App.js. Luego, para agregar capacidades de navegación, envuelve los componentes dentro de la clase App en un componente NavigationContainer.

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

// ...

class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={Home}
          />
          <Stack.Screen
            name="Subjects"
            component={Subjects}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

// ...

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

Redux en una aplicación React Native

Como mencionamos anteriormente, Redux es una herramienta de gestión de estados, y la usarás para gestionar todos los estados de la aplicación. Nuestra aplicación es un selector de temas donde el usuario elige los temas de una lista predefinida.

Primero, instala los paquetes Redux.

1	npm install redux react-redux

Una aplicación Redux cumple las siguientes condiciones:

El estado describe completamente la condición de la aplicación en cualquier momento.
La interfaz de usuario se muestra basada en el estado de la aplicación.

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

Crear un reductor

El reductor se encargará de mantener el estado de los subjects en todo momento.

Crea el archivo SubjectsReducer.js en el nivel de la raíz y añade el siguiente código.

import { combineReducers } from 'redux';

const INITIAL_STATE = {
  current: [],
  all_subjects: [
    'Literature',
    'Speech',
    'Writing',
    'Algebra',
    'Geometry',
    'Statistics',
    'Chemisrty',
    'Biology',
    'Physics',
    'Economics',
    'Geography',
    'History',
  ],
};

const subjectsReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    default:
      return state
  }
};

export default combineReducers({
  subjects: subjectsReducer
});

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 acción, el estado no puede cambiar.

Crear una acción

Una acción tiene un tipo y una carga útil opcional. En este caso, el tipo será SELECT_SUBJECT, y la carga útil será el índice de la matriz de los subjects a seleccionar.

Crea el archivo SubjectsActions.js en el nivel raíz y añade el siguiente código.

export const addSubject = subjectsIndex => (
  {
    type: 'SELECT_SUBJECT',
    payload: subjectsIndex,
  }
);

Ahora, actualizaremos el reductor para responder a esta acción.

// ...

const subjectsReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case 'SELECT_SUBJECT':
     
      // copy the state 
      const { current,  all_subjects,} = state;

      //remove a subject from the all_subjects array
      
      const addedSubject = all_subjects.splice(action.payload, 1);

      // put subject in current array
      current.push(addedSubject);

      // update the redux state to reflect the change
      const newState = { current, all_subjects };
      
      //return new state
      return newState;

    default:
      return state
  }
};

// ...

Añadir el reductor a la aplicación

Ahora, abre App.js y crea una nueva tienda para la aplicación usando la función createStore(). También ponemos ese almacén a disposición de los componentes de nuestra aplicación envolviéndolos en el componente <Provider>. Esto asegurará que todos los componentes hijos puedan acceder al estado de la tienda.

import 'react-native-gesture-handler';
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import subjectsReducer from './SubjectsReducer';
import Home from './Home';
import Subjects from './Subjects';

// ... . rest of the code

const store = createStore(subjectsReducer);

class App extends React.Component {
  // ...

  render() {
    return (
      <Provider store={store}>
        <NavigationContainer>
          //.. rest of the code
        </NavigationContainer>
      </Provider>
    )
  }
}

Añadir Redux a los componentes

Ahora veamos cómo hacer que los datos de estado estén disponibles para los componentes con la función connect(). Para usar connect(), necesitamos crear una función mapStateToProps, la cual mapeará el estado del almacén a los puntales en los dos componentes.

Abre Home.js, mapea el estado, y renderiza los valores para los subjects actuales (que se encontrarán en this.props.subjects.current). Además, agrega un botón para navegar al componente Subjects.

import React from 'react';
import { connect } from 'react-redux';
import { StyleSheet, Text, View, Button } from 'react-native';

class Home extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>You have { this.props.all_subjects.current.length } subjects.</Text>
        <Button
          title="Select more subjects"
          onPress={() =>
            this.props.navigation.navigate('Subjects')
          }
        />
      </View>
    );
  }
}


const mapStateToProps = (state) => {
  const { subjects } = state
  return { subjects }
};

export default connect(mapStateToProps)(Home);

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

import React from 'react';
import { connect } from 'react-redux';
import { StyleSheet, Text, View, Button } from 'react-native';

class Subjects extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>My Subjects!</Text>
        />
      </View>
    );
  }
}

//...

const mapStateToProps = (state) => {
  const { subjects } = state
  return { subjects }
};

export default connect(mapStateToProps)(Subjects);

También añadiremos el código para mostrar todos los subjects en el componente Subjects y un botón para navegar a la pantalla de inicio. También añadirá un botón que añadirá la acción addSubject a Subject.js. Aquí está cómo debería verse el método render() final en Subject.js:

class Subject extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Select Subjects Below!</Text>

        {
          this.props.subjects.all_subjects.map((subject, index) => (
            <Button
              key={ subject }
              title={ `Add ${ subject }` }
              onPress={() =>
                this.props.addSubject(index)
              }
            />
          ))
        }

        <Button
          title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}

La aplicación final debería verse así.

Conclusión

Redux es una herramienta valiosa, pero solo es útil cuando se usa de la manera correcta. Algunas de las situaciones en las que Redux podría ser útil incluyen código en el que está trabajando mucha gente o aplicaciones que contienen grandes cantidades de estado de aplicación.

En este tutorial, aprendiste a configurar una aplicació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 colecció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.

Si tienes problemas para decidir qué plantilla de React Native en CodeCanyon es la adecuada para ti, este artículo debería ayudarte:

Aplicación móvil

19 Mejores plantillas de React Native del 2020 (incluyendo 5 gratis)

Franc Lucas