Redux에 슬라이스 추가하기

우리는 Redux 애플리케이션 생성을 위한 주요 도구들을 준비했습니다. 이제 직접적으로 그 구성 요소들을 구현하는 단계로 넘어갈 수 있습니다.

이번 강의에서는 슬라이스 (slices) 개념부터 시작하겠습니다. Redux 애플리케이션은 store에 저장되는 하나의 전역 상태를 가집니다. 이 상태는 슬라이스들로 나누어집니다. 사실상, 슬라이스는 애플리케이션의 특정 부분에 대한 초기 상태, 리듀서 로직 및 액션들을 포함하는 저장소의 한 조각입니다.

우리 애플리케이션에는 상품들이 등장할 것이므로, 우리가 만들 첫 번째 슬라이스는 상품에 대한 정보를 담게 됩니다. 또한 슬라이스를 생성할 때 이 정보를 처리하는 방법을 아는 리듀서를 추가해야 합니다.

src 폴더로 들어가 parts 폴더를 생성하고, 그 안에 products 폴더를 만듭시다. 여기에 상품과 관련된 모든 코드 파일을 넣을 것입니다. products 폴더 안에 productsSlice.js 파일을 생성하고, RTK에서 슬라이스 생성에 사용할 함수 createSlice를 가져옵니다:

import { createSlice } from '@reduxjs/toolkit'

이제 상품을 위한 슬라이스를 생성하고 이름을 'products'로 지정합시다. reducers 속성은 일단 빈 중괄호로 남겨둡니다:

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

또한 initialState - 애플리케이션이 처음 시작될 때 로드될 상태 슬라이스의 초기 상태를 정의해야 합니다. 가져오기 문 다음, 슬라이스 생성 전에 바로 작성해 봅시다. 상품 데이터를 포함하는 몇 개의 객체로 이루어진 배열로 설정합니다. 각 상품에 대해 id, 제목, 설명, 가격 및 수량을 지정합니다:

const initialState = [
	{
		id: '1',
		title: 'Product1',
		desc: 'This is an amazing product',
		price: '300',
		amount: '30',
	},
	{
		id: '2',
		title: 'Product2',
		desc: 'This is a nice product',
		price: '700',
		amount: '12',
	},
]

파일 코드 끝부분에서 createSlice 함수의 작업 결과로 생성된 reducer를 가져와 내보냅니다. 이것은 애플리케이션의 다른 파일에서 유용하게 사용될 것입니다:

export default productsSlice.reducer

학생용 애플리케이션을 엽니다. 강의에서 설명한 대로 studentsSlice.js 파일을 생성합니다. createSlice를 사용하여 students 슬라이스를 만듭니다. 슬라이스의 초기값으로 학생 데이터를 포함하는 몇 개의 객체로 이루어진 배열을 사용하세요.

각 학생에 대해 다음 필드를 만듭니다: id, 이름, 성, 나이 및 전공.

studentsSlice.js 파일 끝에서, 강의에서 설명한 대로 얻어진 reducer를 내보냅니다.