Redux (2) - state 변경

1. store의 state 변경하는 법 

step 1) store.js 안에 state 수정해주는 함수 생성

- slice 안에 reducers : { }  열고 거기 안에 함수 만들면 된다. (함수 작명은 자유롭게)

- 파라미터 하나 작명하면 그건 기존 state가 된다.

- return 우측에 새로운 state 입력하면 그걸로 기존 state를 변경해준다. 

let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : {
    //state 수정해주는 함수
    changeName(state){ 
      return 'john ' + state
    },
    수정함수2(state){ 
      return ...
    },
  }
})

 

step 2) 생성한 수정함수(changeName) export 

slice이름.actions 라고 적으면 state 변경함수가 전부 그 자리에 출력된다. 

그걸 변수에 저장했다가 export 하면 된다. 

(store.js)

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

 

step 3) import 해서 사용

예를 들어서 Cart.js 에서 버튼같은거 하나 만들고 그 버튼 누르면 state를 'kim' -> 'john kim' 이렇게 변경하고 싶으면

- store.js에서 원하는 state변경함수를 import 한다.

- useDispatch 라는 것도 라이브러리에서 가져온다.

- 그리고 dispatch( state변경함수() ) 이렇게 감싸서 실행하면 state 변경함수가 실행된다. 

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

function CartPage() {
    let state = useSelector((state) => state)
    let dispatch = useDispatch()

    return (
        <div>
            <button onClick={() => {
                dispatch(changeName())
            }}>+</button>
        </div>
    ) 
}

export default CartPage;

 

 

2. redux state가 array/object인 경우 변경하려면 

{name : 'kim', age : 20} 인 state를 'kim' -> 'park' 이렇게 변경하고 싶으면? 

 

방법① return 오른쪽에 적은걸로 기존 state를 변경

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'
    }
  }
}) 

 

state를 직접 수정하는 문법을 사용해도 잘 변경되는 이유는

Immer.js 라이브러리가 state 사본을 하나 더 생성해준 덕분인데 Redux 설치하면 포함되어 온다.

 

☞ array/object 자료의 경우 state를 직접 수정해도 잘 변경되니, 직접 수정하는 것이 좋다. 

 

 

3. state 변경함수에 변수 사용하는 법

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

 

(참고)

- a 말고 action 이런 식으로 작명 많이 한다. 

- action.type 하면 state변경함수 이름이 나오고

- action.payload 하면 파라미터가 나온다.