Adición de un slice en Redux

Hemos preparado las herramientas principales para crear nuestra aplicación Redux, ahora podemos pasar directamente a la implementación de sus componentes.

En esta sesión comenzaremos con el concepto de slices (slices). Una aplicación Redux tiene un estado global que se almacena en el store. Este estado se divide en slices. De hecho, un slice es una porción del store que contiene el estado inicial, la lógica del reducer y las acciones para una parte específica de la aplicación.

En nuestra aplicación figurarán productos, por lo tanto, el primer slice que haremos contendrá información sobre los productos. También al crear el slice es necesario agregar un reducer que sepa cómo procesar esta información.

Vayamos a la carpeta src y creemos la carpeta parts, y luego dentro de ella la carpeta products - aquí guardaremos todos los archivos con código relacionados con los productos. En la carpeta products crearemos el archivo productsSlice.js, y luego importaremos en él desde RTK la función createSlice, con la ayuda de la cual crearemos los slices:

import { createSlice } from '@reduxjs/toolkit'

Ahora creemos el slice para los productos y llamémoslo 'products'. Para la propiedad reducers dejaremos por ahora llaves vacías:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {}
})

También necesitamos definir initialState - el estado inicial del slice que se cargará en el primer inicio de la aplicación. Escribámoslo justo después de la importación y antes de crear el slice. Que sea un array de un par de objetos que contengan datos de productos. Especificaremos para cada producto id, nombre, descripción, precio y cantidad:

const initialState = [
	{
		id: '1',
		title: 'Product1',
		desc: 'This is an amazing product',
		price: '300',
		amount: '30',
	},
	{
		id: '2',
		title: 'Product2',
		desc: 'This is a nice product',
		price: '700',
		amount: '12',
	},
]

Al final del código del archivo, tomaremos del resultado de la función createSlice el reducer generado por ella y lo exportaremos. Nos será útil en otros archivos de la aplicación:

export default productsSlice.reducer

Abra su aplicación para estudiantes. Cree en ella el archivo studentsSlice.js, como se describe en la lección. Cree en él con la ayuda de createSlice el slice students. Como valor inicial del slice, que sea un array de un par de objetos que contengan datos de estudiantes.

Para cada estudiante, haga los campos: id, nombre, apellido, edad y especialidad.

Al final del archivo studentsSlice.js exporte el reducer obtenido, como se describe en la lección.