Redux의 리듀서

지난 강의에서 우리는 함수 createSlice를 사용하여 상품을 위한 products 슬라이스와 store에 저장된 이 슬라이스를 업데이트할 리듀서를 만들었습니다. 다시 한번 상기하자면, Redux에서 상태 데이터는 리듀서를 사용하여 변경됩니다.

리듀서에는 여러 제한 사항이 부과된다는 점을 기억해야 합니다. 리듀서는 현재 상태와 action 객체로부터 받은 값만을 기반으로 상태를 업데이트한 후, 상태를 어떻게 변경할지 결정하고 새로운 상태 값을 반환합니다.

우리는 JavaScript의 객체와 배열이 기본적으로 변이 가능하다는 것을 알고 있습니다. 또한 state를 직접 변경해서는 안 되며, 이런 경우에는 복사본으로만 작업해야 한다는 것도 알고 있습니다. 이 규칙은 리듀서도 따라야 합니다. 하지만 이러한 로직을 수동으로 작성하는 것은 상당히 지루하고 복잡한 작업이 될 수 있으며, 여기서 createSlice 함수가 도움이 됩니다. 이 함수는 당신의 '변이 가능한' 코드를 '변이 불가능한' 코드로 변환하는 Immer 라이브러리를 사용합니다. 따라서, createSlice 또는 createReducer 함수를 사용할 때만 편법을 쓰고 삶을 단순화할 수 있습니다.

리듀서의 제한 사항에는 비동기 로직 사용, 임의 값 계산 및 기타 "부수 효과" 수행도 포함됩니다. 이제 리듀서를 더 가까이에서 알게 되었으니, 상품 애플리케이션으로 돌아가 보겠습니다.

우리 애플리케이션에는 이전 강의에서 생성한 store가 있지만, 아직 아무것도 들어있지 않습니다. store.js 파일을 열고 약간의 코드를 추가해 봅시다. 먼저 상품에 대한 리듀서 함수를 가져옵니다:

import productsReducer from '../parts/products/productsSlice'

이제 리듀서로 가져온 함수 productsReducer를 지정할 수 있습니다:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

위의 줄로 우리는 store에게 이제 action이 발생할 때 state.products 슬라이스에 대한 모든 데이터가 productsReducer 리듀서에 의해 업데이트될 것이라고 알려줍니다.

이제 애플리케이션을 실행할 수 있습니다(콘솔에서 잘못된 리듀서에 대한 경고가 사라진 것을 확인하세요!), 브라우저에서 Redux DevTools를 열고 탭을 살펴보세요. 예를 들어, Inspector 탭의 State 탭을 클릭하면 애플리케이션을 처음 실행할 때 상태의 초기 값으로 나타난 두 개의 상품 객체를 볼 수 있습니다. Log monitor 탭에서는 글로벌 상태가 어떤 슬라이스를 가지고 있는지 볼 수 있습니다 - 두 개의 객체를 포함하는 슬라이스 products입니다. Chart 탭도 확인해 보세요.

여러분의 학생 애플리케이션을 열고 store.js 파일의 코드를 강의에서 보여준 대로 변경하세요.

브라우저에서 애플리케이션을 실행하고 Redux DevTools 확장 프로그램의 탭들을 살펴보세요.