Adicionando mais um slice no Redux

Nas lições anteriores, trabalhamos intensamente no slice products para produtos. Em uma aplicação Redux real, o estado pode ter muitos slices para várias finalidades. Portanto, nesta lição, vamos adicionar ao estado mais um slice para os vendedores, que serão efetivamente os que adicionarão produtos em nossa aplicação.

Vamos abrir nossa aplicação de produtos e a primeira coisa que faremos é na pasta parts criar mais uma pasta sellers, aqui colocaremos todo o código e componentes relacionados aos vendedores.

Agora, assim como no caso dos produtos, vamos criar um slice para os vendedores. Para começar, na pasta sellers vamos criar o arquivo sellersSlice.js e importar nele o createSlice:

import { createSlice } from '@reduxjs/toolkit'

Continuamos fazendo os passos padrão. Como valor inicial para o slice, vamos criar quatro vendedores. Para simplificar, eles terão dois campos - id e name:

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

Abaixo, usando o createSlice, vamos criar o slice sellers, passaremos a ele o valor inicial. Como não vamos adicionar vendedores, nem atualizar seus dados posteriormente, vamos deixar o campo de redutores vazio por enquanto:

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

No final do arquivo, não vamos esquecer a exportação do redutor obtido:

export default sellersSlice.reducer

Agora precisamos abrir o arquivo store.js na pasta app e importar o redutor obtido:

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

E então atribuí-lo no configureStore como o redutor para sellers:

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

Abra sua aplicação de estudantes. Crie mais uma pasta teachers, aqui você terá os arquivos de código relacionados aos professores. Crie nela o arquivo teachersSlice.js. Usando os materiais da lição, crie nele o slice teachers usando o createSlice.

Deixe que cada objeto com dados do professor tenha três propriedades: id, name (que conterá o sobrenome e iniciais, por exemplo 'Pertov A.V.') e a matéria (qualquer uma que você inventar - física, matemática, biologia, etc.). Faça 3 desses objetos com professores como valor inicial para o slice.

Importe o redutor obtido teachersReducer no store.js e atribua-o como o redutor para teachers, como mostrado na lição.