Redux에 판매자 정보 추가하기

우리는 제품들이 실제로 판매자들에 의해 앱에 추가된다는 점에 대해 이야기했습니다. 새 제품을 추가할 때 판매자 정보도 함께 표시해 봅시다.

제품 앱을 열고, 그 안의 productsSlice.js 파일을 엽니다. prepare 함수에 하나의 매개변수를 더 전달해 봅시다. 이름을 sellerId라고 하고, 이후 액션의 payload에 설정하겠습니다. 이제 우리의 prepare 코드 조각은 다음과 같이 될 것입니다:

prepare(name, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			name,
			desc,
			price,
			amount,
			seller: sellerId,
		},
	}
},

이제 새 제품 추가를 위한 폼이 있는 NewProductForm.jsx 파일에 몇 가지 변경 사항을 적용해야 합니다. 먼저 판매자 ID를 위한 로컬 상태를 하나 더 추가하겠습니다:

const [sellerId, setSellerId] = useState('')

그런 다음 useDispatch를 위한 dispatch 변수를 선언한 후, useSelector 훅을 사용하여 상태에서 판매자 슬라이스를 가져오는 코드를 추가하겠습니다:

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

입력 필드에 대한 핸들러에 하나를 더 추가하겠습니다:

const onSellerChanged = (e) => setSellerId(e.target.value)

productAdded 액션에 sellerId를 추가하여 onSaveProductClick를 수정하겠습니다:

dispatch(productAdded(name, desc, price, amount, sellerId))

학생 정보 앱을 열어 보세요. 학생을 추가한 교수 정보를 입력할 수 있는 기능을 추가하십시오. 이를 위해 강의 내용을 학습하고 studentsSlice.js 파일에서 prepare 함수에 변경 사항을 적용하세요.

NewStudentForm.jsx 파일에 해당 변경 사항을 적용하세요.