문제해결후 다시 장바구니 만들기 1

객체를 사용하는이유: 필요한 데이터와 메서드를 한곳에 묶어서 운반하기 편하다

 

 

리덕스세팅하기

 

장바구니추가

 

1.상품상세페이지에서 장바구니담기 버튼을 누르면 디스패쳐(요구)액션(요청서)가 리덕스로 간다

 

2.리덕스에 해당상품번호의 상품을 기존 state에 추가해주세요 요청이 도착한다 action객체 안에 payload로

 

3. 기존 state와 payload를 합쳐줘야한다. 둘다 자료형이 객체배열이므로 ...로 배열을 없애주고 객체끼리 더해준다

 

4.새로운 객체 배열에 담기니까 새로운 주소값을 배정받는다 ->리덕스 state에 새로운 주소값을 배정해도 괜찮은건가?

 

5.기존상품과 상품추가를 합쳤으면 중복상품을 없애줘야하니까 map으로 상품 1개씩 들고온다

 

6.filter함수는 참일때만 상품을 통과시켜서 새로운 배열을 만들어준다

 

7.참인 기준이 존재해야하는데 참인기준은 현재 상품의 상품번호가 배열에서 1개라는걸 알아야한다

 

8.즉 해당 상품번호에 해당하는 인덱스가 유일무이해야한다 해당상품번호를 다시 전체 상품들과 대조해보기위해 findindex메서드를 사용한다

 

9.findindex메서드의 반환값은 무조건 맨처음인덱스만 반환하기에 배열내에 같은 상품번호가 존재해도 무조건 맨처음 index를 반환시켜준다

 

10 findindex의 결과물을 현재상품의 인덱스와 비교하여 참이면  객체를 반환하여 다시 배열에 넣어주면된다

 

 

 

리덕스 수량변경하기 

 

1. 장바구니 컴포넌트에서 리덕스 state변경 요청이오면 현재 상품들중 해당 인덱스의 객체의 상품수량을 변경해줘야한다

 

2. 리덕스툴킷을 사용하면 객체의 값을 바꿔줄때 setstate에  [...state]할 필요없이 해당 인덱스의 객체의 정보를 바꿔주면 자동으로 불변성을 지켜준다

 

3.디스패쳐의 요청이오면 state객체값을 변경하고 객체변경시 return은 없어도된다. 

 

4. 해당 index를 가진 상품객체의 수량을 바꿔준다면 정렬시 인덱스가 서로 맞지않아 다른 상품객체의 수량을 건드릴수밖에없다

 

5.차라리 카트컴포넌트에서 상품번호를 받고 findindex로 해당상품번호에 해당하는 인덱스만 반환한뒤

현재state에서 해당index의 객체의 정보를 수정해주는게  더 정확하다.

 

6.상품번호와 함수용도를 객체로 묶어서 리덕스로보내고   내가원하는 데이터를 빼오면된다

 

7.수량변경할때 +와 -는 +1과 -1차이밖에없으므로 함수를 파라미터로 재활용한다