Adición de otro slice en Redux

En lecciones anteriores trabajamos intensamente en el slice products para productos. En una aplicación Redux real, puede haber muchos slices en el estado para varios propósitos. Por lo tanto, en esta lección agregaremos otro slice al estado para los vendedores, quienes en realidad agregarán los productos en nuestra aplicación.

Abramos nuestra aplicación con productos y lo primero que haremos es en la carpeta parts crear otra carpeta sellers, aquí ubicaremos todo el código y componentes relacionados con los vendedores.

Ahora, como en el caso de los productos, creemos un slice para los vendedores. Para empezar, en la carpeta sellers crearemos el archivo sellersSlice.js e importaremos en él createSlice:

import { createSlice } from '@reduxjs/toolkit'

Continuamos con los pasos estándar. Como valor inicial para el slice crearemos cuatro vendedores. Para simplificar, tendrán dos campos: id y name:

const initialState = [
	{ id: '0', name: 'Super Power' },
	{ id: '1', name: 'Miracle Life' },
	{ id: '2', name: 'Dolls&Toys' },
	{ id: '3', name: 'Granny' },
]

A continuación, usando createSlice crearemos el slice sellers, le pasaremos el valor inicial. Dado que no vamos a agregar vendedores, ni actualizar sus datos más adelante, que el campo de reductores permanezca vacío por ahora:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
})

Al final del archivo, no olvidemos la exportación del reductor obtenido:

export default sellersSlice.reducer

Ahora necesitamos abrir el archivo store.js en la carpeta app e importar el reductor obtenido:

import sellersReducer from '../parts/sellers/sellersSlice'

Y luego asignarlo en configureStore como reductor para sellers:

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

Abra su aplicación de estudiantes. Cree otra carpeta teachers, aquí estarán los archivos de código relacionados con los profesores. Cree en ella el archivo teachersSlice.js. Utilizando los materiales de la lección, cree en él el slice teachers usando createSlice.

Que cada objeto con datos del profesor tenga tres propiedades: id, name (que contendrá el apellido e iniciales, por ejemplo 'Pétrov A.V.') y la asignatura (cualquiera que se le ocurra - física, matemáticas, biología, etc.). Cree 3 de estos objetos con profesores como valor inicial para el slice.

Importe el reductor obtenido teachersReducer en store.js y asígnelo como reductor para teachers, como se muestra en la lección.