React) Redux 03_state 변경하기

setter함수 만들기

1. 함수생성 , export

함수생성
store.js 내에서
reducers:{}를 열고 함수를 만들면 된다.
파라미터를 하나만 작명하면, 해당 파라미터는 기존state값을 받는다.
return 우측에는 새로운 state값을 입력하며, 기존 state를 갈아치운다.

let user = createSlice({
  name : 'user',
  initialState : 'kim',
  
  reducers : { //함수생성
    changeName(state){  //state에 'kim'들어가있다. 
      return 'john ' + state //john kim 으로 갈아치워짐
    }
  }
}) 

export let { changeName } = user.actions //export

export
만약 setter함수가 여러개라면

export let { changeName, 함수2, 함수3 } = user.actions

이렇게 구조분해할당으로 한번에 내보내줄 수 있다.

2. setter함수 가져와 사용하기(dispatch)

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

let state = useSelector((state)=>state)
let dispatch = useDispatch()

(생략) 

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

dispatch( state변경함수() )의 형식으로
반드시 setter함수를 dispatch로 한번 감싸줘야한다.
왜냐?
store.js는 여러 component가 참조해 사용하고 있기때문에
state를 변경시키는 함수를 각각 따로 dispatch로 요청을 해주는 것!.
까다로워보여도 안정성을 위한 기본 리덕스 규칙이니 익숙해지면된다.