Redux 상태 구조 변경하기

우리 Redux 애플리케이션이 어떤 외부 서버와 상호작용하기 위해 구현할 첫 번째 단계는 애플리케이션 시작 시 서버에 저장된 데이터를 가져오는 것입니다. 그러나 먼저 우리 애플리케이션에 몇 가지 변경 사항을 도입해 보겠습니다.

상품 애플리케이션을 열고, 그 안에 있는 productsSlice.js 파일을 엽니다. initialState 정의에 주목하세요. 처음에는 우리의 상품 슬라이스인 productsSlice가 상품 데이터를 가진 객체들(우리의 경우 두 개)이 있는 배열이었습니다. 첫째, 이제 우리가 서버에서 이를 불러올 것이기 때문에 initialState에서 제거해야 합니다. 둘째, 우리는 서버에 API 요청을 보낼 것이며 요청의 상태를 아는 것이 중요합니다. 이 두 가지를 고려하여 initialState를 재구성해 보겠습니다. 이제 단순히 products 필드(처음에는 데이터가 없고 빈 배열만 있음), status 및 error를 가진 객체로 만들어 봅시다. 이제 initialState에 대한 코드가 조금 더 짧아집니다:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

일단 상태를 'idle'(대기)로 설정했습니다. 왜냐하면 처음에는 아무 요청도 보내지 않기 때문입니다. 일반적으로 이 상태는 변경될 수 있으며 'loading', 'succeeded', 'failed' 값을 가질 수 있습니다. 상태를 표시하기 위해 여러분에게 편리한 이름을 선택할 수 있다는 점을 기억하세요.

코드를 아래로 내려갑니다. initialState 변경 후, 리듀서 함수에서 이 상태와 작업하는 코드도 변경해야 합니다. productAdded에 대한 코드를 살펴보겠습니다:

state.push(action.payload)

이제 새로운 상품을 단순히 상품 상태(state)에 추가하는 것이 아니라, 그 속성인 state.products에 추가할 것입니다. 따라서 위의 줄을 다음과 같이 변경합니다:

state.products.push(action.payload)

그에 따라 리듀서 reactionClicked에 대해 동일한 변경을 수행합니다. 다음 대신에:

const currentProduct = state.find((product) => product.id === productId)

이제 다음과 같이 됩니다:

const currentProduct = state.products.find((product) => product.id === productId)

리듀서 productUpdated의 코드에서도 state를 state.products로 직접 변경하세요.

학생 애플리케이션을 엽니다. 그 안에 있는 studentsSlice.js 파일을 엽니다. 이제 여러분의 initialState가 세 가지 속성: students, status, error를 가지도록 하고, 강의에서 보여준 것처럼 재구성하세요.

그에 따라 아래 코드도 변경하세요. 세 가지 리듀서 함수의 코드에서 state를 state.students로 변경하세요.