React shop project Redux 230928

Redux의 state 변경하는법

• state 수정해주는 함수 만들기
• 원할 때 그 함수 실행해달라고 store.js에 요청하기

1. state 수정해주는 함수만들기

• 기존 slice 내부에 reducers : { } 사용해서 변경할 함수 넣어주기

2. 만든 함수 export 하기

• 만든 함수는 만든 곳에 바로 export 할 수 없으니까 slice 밖으로 나와서 export 해주기

• 위 코드에서 { changeName }은 오른쪽 자료를 변수로 빼는 문법일 뿐임

3. 만든 함수 import 해서 사용하기 + dispatch(state변경함수())

• useDispatch()도 선언해주기

useDispatch() : store.js로 요청 보내주는 함수

• dispatch(state변경함수()) 이렇게 사용 함

---

• 버튼을 누르면 state 값이 바뀌는지 확인하기 위해 먼저 기존 state.user값 불러오기

--> +버튼 누르기 전 화면

--> +버튼 누른 후 화면!

---

state가 array/object인 경우

• array/ object의 경우 직접 수정해도 state 변경 됨

• return 없이 변경 함수 아래에 바로 직접 변경해줘도 됨
• 그래서 문자 하나만 필요한 경우에도 일부러 { } 안에 담기도 함

버튼을 누르면 age가 +1 되도록 해보기

• user의 age에 대한 변경 함수를 만들꺼니까
  user함수 안의 reducers 부분의 changeName아래에 age 증가시켜줄 increase함수를 만든다

** 사실 여기에서 reducers에는 하나의 함수만 있어야 하는줄 헷갈렸었는데 아니었다

• 그리고 import해서 쓸 수 있도록 export 해준다

• import 해주고, button에 onClick 속성을 이용해서 dispatch 사용해준다

• 그럼 버튼을 누를때마다 원래 age값인 20에서 1씩 증가한다 !

---

버튼을 누를때마다 1, 3, 10 등 여러 숫자의 간격만큼 증가시키고 싶다면?
==> 파라미터를 이용하자!

** payload는 정확한 값을 불러오기 위해 붙여주는 것

• state 변경함수를 action이라고 하는데 보통 파라미터로 action을 많이 사용함

• 이런식으로 사용하면 ()에 들어가는 숫자만큼 증가하는 기능 사용가능

---

파일 분할하기
--> 코드가 너무 길어질 경우 store라는 폴더를 만들어서 해당 slice를 따로 보관해주는게 깔끔함

• userSlice.js에 길어진 코드를 가져와서 적어주고,
  creatSlice 사용해야 하니까 import 해주기
• user slice를 다른곳에서 사용해야하니까 맨 하단에 export 해주고,
  export해주는 함수들도 가져와서 같이 적어준다

• 위 코드를 아래코드처럼 수정해주기

• store.js에서 user안의 함수를 가져다 사용할 수도 있으니까 store.js에 user import 해주기

• cart.js 등 user 안의 함수를 사용할 파일에 가서 바뀐 파일 경로도 수정해준다

---

수량 + 기능 실습

• 정렬이 바뀌었을 때를 대비해서
  버튼 누르면 옆의 id와 같은 id 가진 상품을 찾아서 +1하도록 해준다

• (state.cart[1].id) ==> 버튼 옆에 있는 id

findindex( )
: array 자료에서 원하는 항목을 찾으려면 find(), findIndex() 골라쓰면 됨

• array 뒤에 붙일 수 있음
• 안에 콜백 함수 넣고 return 뒤에 조건식도 넣으면 됨
• a 라는 파라미터는 array 안에 있던 하나하나의 자료임
• array에 있던 자료들을 다 꺼내서 조건식에 대입해보는데 조건식이 참이면 그게 몇번째 자료인지 알려줌
• 그래서 위 코드는 a.id와 payload가 같으면 그게 몇번째 자료인지 변수에 저장하라는 뜻임