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:

parts/sellers/sellersSlice.jsimport { 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:

sellers/sellersSlice.jsconst 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:

sellers/sellersSlice.jsconst sellersSlice = createSlice({
  name: 'sellers',
  initialState,
  reducers: {},
})

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

sellers/sellersSlice.jsexport default sellersSlice.reducer

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

app/store.jsimport sellersReducer from '../parts/sellers/sellersSlice'

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

app/store.jsexport default configureStore({
  reducer: {
    products: productsReducer,
    sellers: sellersReducer,
  },
})