Redux안에서 state 변경

store의 state 변경하는 법

step 1. store.js안에 state 수정해주는 함수 만들기
step 2. export 하기
step 3. 원할 때 import 하기 + dispatch()로 감싸주기

끝이다.

코드를 통해 천천히 해보자면

step 1

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

이렇게 john에 kim이 붙도록 하는 함수를 하나 만들어준다.

step 2

export let {changeName} = user.actions

actions를 붙이면 state변경함수가 그 자리에 출력된다.

step 3

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

(생략)

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

이렇게 코드를 짜면 끝이다.
대신 실행할 시 dispatch(state변경함수())
이렇게 감싸서 실행해야 state가 변경이 된다.

state가 array/object인 경우

대충 {name : 'kim', age: 20} 인 자료가 있다고 해보자.
여기서 'kim'을 'park'로 바꾸고 싶으면 어떻게 해야할까?

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

이렇게 해주면 바뀔 것이다.
하지만 다른 방법이 하나 더 있는데
state를 직접 수정하는 방법이다.

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

결론은 array/object 자료의 경우 state변경은
state를 직접 수정해버려도 되니까 직접 수정하는게 간단하다.
사실 그래서 위에 간단한 이름같은 것들도 array/object로 저장하는 경우가 많다.

state 변경 함수가 여러개 필요하다면

파라미터문법을 이용하면 가능하다.

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

이렇게 increase함수안에다가 파라미터 문법을 사용하면
increase(10), increase(100)이든 출력이 된다.