Redux에서 선택자 가져오기

때로는 애플리케이션에서 불필요한 코드를 제거하고 데이터를 캡슐화하는 것이 매우 유용합니다.

제품 애플리케이션을 열어 보겠습니다. 애플리케이션의 여러 곳에서 선택자를 사용하여 제품 슬라이스를 가져와 어떤 작업을 수행한다는 점에 유의하세요.

이제 productsSlice.js 파일을 열고, 파일 맨 끝으로 스크롤하여 몇 줄의 코드를 추가하여 두 개의 선택자를 작성하고 내보냅니다. 하나의 함수는 모든 제품을 가져오는 데 사용됩니다:

export const selectAllProducts = (state) => state.products.products

그리고 그 다음에 두 번째 - id로 하나의 제품을 가져오는 함수:

export const selectProductById = (state, productId) =>
	state.products.products.find((product) => product.id === productId)

물론 다음과 같은 복잡한 구조에 대해 의문이 생길 수 있습니다: state.products.products? 답은 간단합니다, 지난 강의에서 슬라이스 구조를 변경했기 때문에 이제 우리 제품은 슬라이스의 별도 속성 products에 배열 형태로 위치하게 됩니다 state.products (여기서 state는 모든 Redux 슬라이스를 포함하는 루트 상태 객체임을 기억하세요).

따라서 우리는 단순히 선택자 함수에 대한 코드를 애플리케이션의 한 곳으로 옮겼고, 이제 해당 함수를 사용한 곳에서 적절한 변경을 해야 합니다. 파일 ProductsList.jsx부터 시작하겠습니다. 여기서는 모든 제품을 가져와야 하므로 selectAllProducts를 가져옵니다:

import { selectAllProducts } from './productsSlice'

그리고 ProductsList 함수 코드 시작 부분에서 다음을 변경합니다:

const products = useSelector((state) => state.products)

다음 줄로:

const products = useSelector(selectAllProducts)

이제 ProductPage.jsx 파일로 이동하겠습니다. 여기서는 id별 제품이 필요했습니다. 다음 줄을 변경합니다 (가져오기 절차를 잊지 마세요):

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

다음으로:

const product = useSelector((state) => selectProductById(state, productId))

EditProductForm.jsx 파일에서도 유사한 변경을 직접 수행하세요. 여기서도 id별 제품이 필요합니다.

이러한 최적화는 단지 여러분의 편의를 위한 것이며, 필요하고 편리하다고 생각할 때 수행할 수 있다는 점을 기억하세요. 우리 예시를 상상해 보면, 선택자 함수 코드를 매번 다른 곳에 작성한 다음 상태 구조를 변경했을 때, 모든 컴포넌트에서 수정해야 했을 것입니다.

학생 애플리케이션을 열어보세요. studentsSlice.js 파일을 엽니다. 파일 맨 아래에 강의에서 보여준 대로 두 개의 선택자를 작성하고 내보냅니다: 모든 학생을 가져오는 selectAllStudents와 id로 한 명의 학생을 가져오는 selectStudentById입니다.

이제 selectAllStudents와 selectStudentById를 StudentsList.jsx, StudentPage.jsx 및 EditStudentForm.jsx 파일로 가져오고, 강의에서 보여준 대로 해당 파일에서 적절한 변경 사항을 적용하세요.