Redux store에 state 보관하기

설치 때 만들어놓은 store.js 파일에서 state를 만들어서 보관할 수 있다.
1. createSlice()로 state를 만들고
2. configureStore() 안에 state 등록하기

import { configureStore, createSlice } from '@reduxjs/toolkit'

let user = createSlice({
  name : 'user',
  initialState : 'kim'
})

export default configureStore({
  reducer: {
    user : user.reducer
  }
}) 

1. 상단에서 createSlice()를 import 해온 다음
   createSlice({ name: "user", initialState: "kim")}
   이렇게 등록을 하고

2. export default configureStore({ reducer: {user : user.reducer} })
   이렇게 export 해주었다.

Redux store에 있는 state 가져다 쓰기

(Cart.js)

import { useSelector } from "react-redux"

function Cart(){
  let a = useSelector((state) => { return state } )
  console.log(a)

  return (생략)
}

아무 컴포넌트에서 useSelector를 임포트 해온뒤에 위와 같은 코드로 사용하면 된다.

Redux store에 있는 state 변경하기

변경하는 법은 간단하다
useState에서 변경함수가 있듯이, store.js파일에서 변경함수를 만들어주면 된다.

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

1. 함수를 작명하고
2. 파라미터 작명하기 (파라미터는 기존 state임)
3. return 우측에 새로운 state를 입력하면 기존 state를 갈아치운다.
4. 그리고 다른곳에서 쓸 수 있게 export 해놓자.

Redux store에 있는 state 변경함수 사용하기

(Cart.js)

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

(생략) 

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

1. store.js에서 원하는 state 변경함수를 임포트한다.
2. useDispatch 라는 라이브러리를 임포트한다.
3. 내가 사용하고싶은 곳에다가 dispatch(state변경함수())를 실행해준다.

복잡하지만 장점

만약 store.js 한 파일에서 변경함수를 사용하는 것이 아니라, 많은 컴포넌트에서 변경함수를 사용하게 된다면, 버그가 발생했을 때, 어디에서 state가 이상하게 바뀐지 모른다.
store.js에서 변경함수를 호출을 한다면 나중에 버그가 있을 때, 그곳에서만 수정을 하면 되기에 장점이다.

state가 array/object라면? 변경은?

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

이것도 가능하고

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

이것도 가능하다

원래 state를 변경할 땐 깊은복사를 활용해서 원본을 보존하고 카피본을 사용했는데, 여기서는 Redux를 설치하면서 같이 딸려온 Immer.js 라이브러리가 state 사본을 하나 더 생성해준 덕분에 가능한 일이다.

참고로 state 변경 함수에서 action.payload를 사용할 수 있는데 변경함수의 파라미터를 받아올 수 있는 것이라고 생각하면 된다. 그리고 action.type을 하면 state 변경함수 이름이 출력이 된다.