Redux 3 : store의 state 변경하는 법

저번 글에 이어 redux 정리글.
redux에 저장한 state를 수정하는 방법 정리.

1. state변경해주는 함수 작성 및 export
2. 공유 state를 필요로 하는 컴포넌트에서 import.dispatch() 필수.
   이렇게 나뉘는데, 좀 더 세분화해서(강의에서 알려준대로) 정리.

1. createSlice의 reducers 에 수정함수 작성

createSlice의 reducers에 수정함수를 만들고,
거기에 파라미터를 작명하면
그게 createSlice에 작성한 state를 받음.
아래 코드에서
user의 값인 'kim'이
state 수정함수 changeName의 파라미터로 받아짐.

let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : {
    changeName(state){
      return 'john ' + state
    }
  }
}) 

2. 수정함수 export

createSlice로 작성한 state명.actions를
다른 컴포넌트에서 활용할 수 있도록 export.
state명.actions로 작성 시
reducers에 작성한 함수가 오브젝트형태로 반환됨.
디스트럭쳐링문법을 활용하면 좀 더 편할듯.

export let { changeName } = user.actions 

3. 수정함수를 사용하고자 하는 컴포넌트에서 import

이건 별거없는듯. 그냥 가져오면 됨.

import { changeName } from "./../store.js"

4. dispatch라는 redux기능을 써서 수정함수 실행

redux의 useDispatch를 import.
useState때처럼 변수로 받으면 편함.
useDispatch로 수정함수를 감싼 뒤 활용.

import { useDispatch, useSelector } from "react-redux"
let dispatch = useDispatch();

<button onClick={()=>{
  dispatch(changeName())
}}>버튼임</button>

왜 이렇게 써야해요?

수정함수는 store.jsx에 모아두고,
컴포넌트에서는 그 함수를 부르는형식인 이유가 있나?
컴포넌트들에서 직접 값을 수정해버리면,
버그터졌을때 추적이 어려움.
이방식이면 수정함수부터 조질수있음.

숙제

Cart 페이지에 만들어둔 버튼누르면 왼쪽에 있는 수량이 +1 되는 기능을 만들어보자.
다음 글에 작성.