Redux (4) - state가 object/array일 경우 변경하는 법

1. 전체 바꿔끼우기

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

- 비효율적!!

 

 

2. 직접수정 (가능) - Immer.js라이브러리가 state 사본을 하나 더 생성해준 덕분

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

 

 

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

( +1하는 것도 좋지만 +10 하는 버튼이 필요할 때)

changeName(10)
changeName(100)

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

state 두 번째 파라미터(action)가 함수 사용시 입력한 것을 가져와서  action.payload를 통해 불러온다!