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:

parts/products/productsSlice.jsimport { 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:

parts/products/productsSlice.jsconst 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:

parts/products/productsSlice.jsconst 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:

parts/products/productsSlice.jsexport default productsSlice.reducer