리액트 - Redux : Redux Toolkit state 변경

store의 state를 변경하는 법

1. store.js 안에 state 수정해주는 함수부터 만든다.

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

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

export let { changeName } = user.actions

3. 원할 때 import 해서 사용한다. 근데 dispatch() 로 감싸서 써야함

예를 들어 Cart.js에서 버튼하나 만들고 클릭하면 이름앞에 john을 추가해주고 싶다면

(Cart.js)

import { useDispatch, useSelector } from "react-redux"
import { changeName } from "./../store.js"

(생략) 

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

위 처럼 onClick에서 dispatch(변경함수())를 호출한다.

state가 object/array일 경우

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    changeName(state){
      state.name = 'park'
    }
  }
}) 

state가 위처럼 object, array일 경우 그냥 return 없이 state를 직접 수정해버리면 된다.

근데 사실 우리는 저렇게 정적인 변경을 원하는게 아니라 동적으로 요청을 받아서 변경하고 싶다. 그러려면 파라미터가 필요한데 파라미터를 받아 사용하는 방법은 다음과 같다.

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

이렇게 함수에 파라미터 하나 더 추가하고 아래처럼 사용하면 되는데 '.payload'를 붙여야 나온다.