Adicionando um Slice no Redux

Preparamos as ferramentas básicas para criar nossa aplicação Redux, agora podemos passar diretamente para a implementação de seus componentes.

Nesta lição, começaremos com o conceito de slices (slices). Uma aplicação Redux tem um estado global único, armazenado na store. Este estado é dividido em slices. Basicamente, um slice é uma parte do store contendo o estado original, a lógica do redutor e das ações para uma parte específica da aplicação.

Em nossa aplicação, teremos produtos, portanto, o primeiro slice que faremos conterá informações sobre os produtos. Além disso, ao criar um slice é necessário adicionar um redutor que saiba como processar essas informações.

Vamos para a pasta src e criar a pasta parts, e depois dentro dela a pasta products - aqui colocaremos todos os arquivos de código relacionados aos produtos. Na pasta products criaremos o arquivo productsSlice.js, e então importaremos nele do RTK a função createSlice, com a qual criaremos os slices:

import { createSlice } from '@reduxjs/toolkit'

Agora vamos criar o slice para produtos e chamá-lo de 'products'. Para a propriedade reducers, vamos deixar as chaves vazias por enquanto:

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

Também precisamos definir o initialState - o estado inicial do slice de estado que será carregado na primeira execução da aplicação. Vamos escrevê-lo logo após a importação e antes de criar o slice. Que seja um array com alguns objetos contendo dados de produtos. Vamos especificar para cada produto o id, nome, descrição, preço e quantidade:

const initialState = [
	{
		id: '1',
		title: 'Produto1',
		desc: 'Este é um produto incrível',
		price: '300',
		amount: '30',
	},
	{
		id: '2',
		title: 'Produto2',
		desc: 'Este é um produto legal',
		price: '700',
		amount: '12',
	},
]

No final do código do arquivo, vamos pegar do resultado da função createSlice o redutor gerado por ela e exportá-lo. Ele será útil para nós em outros arquivos da aplicação:

export default productsSlice.reducer

Abra sua aplicação para estudantes. Crie nela o arquivo studentsSlice.js, conforme descrito na lição. Crie nele com auxílio de createSlice o slice students. Como valor inicial do slice, tenha um array com alguns objetos contendo dados dos estudantes.

Para cada estudante, faça os campos: id, nome, sobrenome, idade e especialização.

No final do arquivo studentsSlice.js exporte o redutor obtido, conforme descrito na lição.