Redux에 다른 슬라이스 추가하기

지난 수업에서 우리는 상품에 대한 products 슬라이스를 집중적으로 작업했습니다. 실제 Redux 애플리케이션에서는 다양한 목적을 위해 상태(state)에 많은 슬라이스가 있을 수 있습니다. 그래서 이번 강의에서는 상태(state)에 판매자를 위한 다른 슬라이스를 추가하겠습니다. 이 판매자들이 실제로 우리 애플리케이션에서 상품을 추가하게 될 것입니다.

우리의 상품 애플리케이션을 열고 가장 먼저 할 일은 parts 폴더에 다른 폴더 sellers를 생성하는 것입니다. 여기에 판매자와 관련된 모든 코드와 컴포넌트를 배치할 것입니다.

이제, 상품의 경우와 마찬가지로, 판매자를 위한 슬라이스를 생성해 봅시다. 먼저 sellers 폴더 내에 파일 sellersSlice.js를 생성하고 여기에 createSlice를 임포트합니다:

import { createSlice } from '@reduxjs/toolkit'

표준 단계를 계속 진행합니다. 슬라이스의 초기 값으로 네 명의 판매자를 생성합니다. 간단하게 하기 위해 그들은 두 개의 필드 - id 와 name를 가질 것입니다:

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

아래에서 createSlice를 사용하여 슬라이스 sellers를 생성하고, 초기 값을 전달합니다. 우리는 나중에 판매자를 추가하거나 그들의 데이터를 업데이트하지 않을 것이므로 리듀서 필드는 일단 비어 있게 둡시다:

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

파일 끝에서 얻은 리듀서의 익스포트를 잊지 마세요:

export default sellersSlice.reducer

이제 app 폴더에 있는 파일 store.js를 열고 얻은 리듀서를 임포트해야 합니다:

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

그런 다음 configureStore에서 sellers의 리듀서로 지정합니다:

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

학생들과 함께하는 애플리케이션을 엽니다. 다른 폴더 teachers를 생성하세요. 여기에는 교사와 관련된 코드 파일이 있습니다. 그 안에 파일 teachersSlice.js를 생성합니다. 강의 자료를 사용하여 createSlice를 사용하여 슬라이스 teachers를 생성합니다.

각 교사 데이터 객체에는 세 가지 속성이 있도록 하세요: id, name (성과 이니셜을 포함합니다, 예를 들어 'Petrov A.V.') 과목 (물리, 수학, 생물학 등 원하는 과목을 생각해 내십시오). 슬라이스의 초기 값으로 3명의 교사 객체를 만듭니다.

얻은 리듀서 teachersReducer를 store.js에 임포트하고 강의에서 보여준 것처럼 teachers의 리듀서로 지정하세요.