Dodawanie kolejnego slice'a w Redux

Na poprzednich zajęciach intensywnie pracowaliśmy nad slice'em products dla produktów. W prawdziwej aplikacji Redux w stanie może być wiele slice'ów do różnych celów. Dlatego na tej lekcji dodamy do state jeszcze jeden slice dla sprzedawców, którzy faktycznie będą dodawać produkty w naszej aplikacji.

Otwórzmy naszą aplikację z produktami i pierwsza rzecz, którą zrobimy, to w folderze parts utworzymy jeszcze jeden folder sellers, tutaj będziemy umieszczać cały kod i komponenty, dotyczące sprzedawców.

Teraz, tak jak w przypadku produktów, stwórzmy slice dla sprzedawców. Na początek w folderze sellers utwórzmy plik sellersSlice.js i zaimportujmy do niego createSlice:

parts/sellers/sellersSlice.jsimport { createSlice } from '@reduxjs/toolkit'

Kontynuujemy standardowe kroki. Jako wartość początkową dla slice'a utwórzmy czterech sprzedawców. Dla prostoty będą mieli dwa pola - id i name:

sellers/sellersSlice.jsconst initialState = [
  { id: '0', name: 'Super Power' },
  { id: '1', name: 'Miracle Life' },
  { id: '2', name: 'Dolls&Toys' },
  { id: '3', name: 'Granny' },
]

Poniżej za pomocą createSlice utwórzmy slice sellers, przekażmy mu wartość początkową. Ponieważ nie będziemy ani dodawać sprzedawców, ani aktualizować ich danych w przyszłości, to niech pole z reducerami pozostanie na razie puste:

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

Na końcu pliku nie zapomnijmy o eksporcie otrzymanego reducera:

sellers/sellersSlice.jsexport default sellersSlice.reducer

Teraz musimy otworzyć plik store.js w folderze app i zaimportować otrzymany reducer:

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

I następnie przypisać go w configureStore jako reducer dla sellers:

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