store에서 state 변경하는 방법

1. Redux state 변경하는 방법

기존의 useState와는 다른 방식으로 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하고 사용한다.

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

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

useDispatch도 import해준다.
dispatch(changeName()) 변경 함수를 dispatch로 감싸서 사용한다.

2. 이렇게 사용하는 이유

컴포넌트에서 직접 state를 수정하면 편하겠지만 프로젝트가 크다면 단점이 될 수 있다.
여러가지 컴포넌트에서 모두 직접 'kim'이라는 state를 변경하다가 에러가 발생한다면 원인을 찾기 위해 그 컴포넌트들을 다 뒤져야 한다.
하지만 state 수정 함수를 store에 미리 만들어두고 컴포넌트는 store에 state를 변경해달라고 부탁한다면 에러가 생기더라도 store 파일만 살펴보면 된다.