Redux(2)

store의 state 변경하는 법

1. store.js안에 state 수정 함수를 만든다.
let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : {
    changeName(state){
      return 'john ' + state
    }
  }
}) 

slice안에 reducer : {} 열고 거기 안에 함수를 만들면 된다.
-함수 작명 마음대로 하고
-파라미터 하나 작명하면 그건 기존 state가 된다.
-return 우측에 새로운 state 입력하면 그걸로 기존 state를 갈아치워 준다.
그러면 이제 changeName() 쓸 때마다 'kim'->'john kim' 이렇게 변한다.


2. 다른 곳에서 쓰기 좋게 export 해준다.

export let { changeName } = user.actions 

slice이름.actions라고 적으면 state 변경함수가 전부 그 자리에 출력됨.
그걸 변수에 저장했다가 export 하라는 뜻이다.


3. 원할 때 import해서 사용한다. 근데 dispatch()로 감싸서 써야함.
예를 들어서 Cart.js에서 버튼 같은 거 하나 만들고 그 버튼을 누르면 state를 'kim'->'john kim'이렇게 변경하고 싶으면

(Cart.js)
import { useDispatch, useSelector } from "react-redux"
import { changeName } from "./../store.js"
(생략) 
<button onClick={()=>{
  dispatch(changeName())
}}>버튼임</button> 

-store.js에서 원하는 state 변경 함수 가져오면 되고
-useDispatch라는 것도 라이브러리에서 가져온다.
-그리고 dispatch( state변경 함수() )이렇게 감싸서 실행하면 state 변경된다.

state가 object/array일 경우 변경하는 법

1.변경할 것을 직접 쓰는 방법 : return 오른쪽에 적은 걸로 기존 state를 갈아치워주니까.

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      return {name : 'park', age : 20} //이렇게 변경할 자리에 변경할 것을 적어넣는다.
    }
  }
}) 

2.state를 직접 수정한는 방법:immer.js 라이브러리가 state 사본을 하나 더 생성해준 덕분(Redux 설치하면 딸려옴) ``` let user = createSlice({ name : 'user', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ state.name = 'park' } } }) ```

결론은!
array/object 자료의 경우 state 변경은 state를 직접 수정해도 되니까 직접 수정 하자!
그래서 용이한 수정을 위해 state 만들 때 문자나 숫자 하나만 필요해도 redux에선 일부러 object 나 array에 담는 경우가 있다.

응용문제1
버튼을 누르면 state 중 age 항목이 +1 되도록 해보시오

//store.js
let user = createSlice({ //useState 역할임
    name : 'user',
    initialState : {name : 'kim', age : 20},
    reducers: {
       // 1. state 수정함수 만들기
      increase(state){ //매개 변수 자리에 state = 기존 state를 뜻함.
        state.age = state.age+1;
        //state.age += 1
      }
    }
})

//cart.js
<div>{state.user.name} {state.user.age}의 장바구니</div> 
        <button onClick={()=>{
          //dispatch(state변경함수())
          //dispatch의 역할 = store.js로 이름 바꾸는 함수 쓰고 싶다고 메세지 좀 보내주세요
           dispatch(increase()) 
                    }}>버튼</button>

응용문제2
이번엔 버튼을 클릭하면 +10씩 어떨 때는 +100으로 원할 때마다 바뀔 수 있도록 바꿔보시오

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    increase(state, a){
      state.age += a.payload
    }
  }
})

state 변경함수의 둘째 파라미터를 작명하면 이제 increase(10),increase(100) 이런 식으로 파라미터 입력을 해서 함수 사용이 가능하다.
파라미터에 넣은 자료들은 action.payload하면 나온다.
action.payload는 해당 액션과 같이 전달하는 값을 의미한다.
참고:
1.action.type 하면 state변경함수 이름이 나오고
2.action.payload 하면 파라미터가 나온다.