[React] Redux : state가 object/array일 경우 변경하는 법, 파일 분할

 

 

 

Redux state가 object/array일 경우 변경하는 법

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

 

{name : 'kim', age: 20} 인 자료를 state를 만들었다.

여기에서 'kim' → 'park' 이렇게 변경하고 싶으면 state 변경 함수인 changeName()을 사용하면 된다.

 

 

그런데 array, object 자료의 경우의 state변경은 state를 직접 수정도 가능하다.

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

 

state를 직접 수정하는 문법을 사용해도 변경이 가능한 이유는 Immer.js 라이브러리가 state 사본을 하나 더 생성해 준 덕분인이다. Redux를 설치하면 Immer.js 라이브러리는 자동으로 설치된다.

 

(참고) 그래서 state 만들 때 문자나 숫나 하나만 필요해도 redux에서는 일부러 object나 array에 담는 경우도 있다. 수정이 편리해지기 때문이다.

 

 

 

비슷한 state 변경 함수가 여러개 필요한 경우, 파라미터 문법 이용

버튼을 누르면 state 중 age 항목이 +1 되게 만들어 보자.

(Store.js)
 let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    increase(state){
      state.age += 1
    }
  }
})
export let { increase } = user.actions

이렇게 increase라는 함수를 만들고 export 한다.

필요한 곳에서 import 한 후 dispatch(increase()) 하면 +1이 된다.

 

 

그런데 만약 +10도 하고, +100도 하고 싶으면 +10 하는 함수를 만들고, +100 하는 함수를 만들어야 한다.

이렇게 여러개를 미리 만들어도 되지만 함수는 파라미터 문법을 이용하면 비슷한 함수 여러개를 만들 필요가 없다.

state 변경 함수에도 파라미터 문법이 사용 가능하다.

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

(Cart.js)
<button onClick={ ()=>{
    dispatch(increase(100));
} }>버튼</button>

 

state 변경 함수의 두번째 파라미터를 작명하면  increase(10), increase(100) 이렇게  파라미터를 입력해서 함수 사용이 가능하다.

파라미터 자리에 넣은 자료들은 action.payload 하면 파라미터가 나온다. 

(참고)

• action에 다른 이름을 사용해도 되지만 보통 action이라고 한다. (state 변경 함수를 action이라고 함,)
• action.type은 state 변경 함수 이름이 나온다.
• action.payload은 파라미터가 나온다. (내가 사용하기 원하는 값이 나오는 것)

 

 

 

---

 

파일 분할

코드가 길어서 보기 싫으면 코드를 다른 파일로 빼면 된다.

이전 포스팅에서 계속 사용해 온 코드에서 let user 변수와 state 변경 함수, export 부분을 store폴더/userSlice로 분리했다.

([Store]-userSlice.js)
import { createSlice } from '@reduxjs/toolkit'

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

export let { changeName, increase } = user.actions

export default user;

 

store.js에서 store/userSlice.js 파일에 있는 변수를 사용하고 싶다면 import 해오면 된다. 

(Store.js)
import user from './store/userSlice.js'

 

그리고 changeName 함수, increase 함수를 export 하는 파일이 바뀌었으니 이 함수들을 import 하는 경로도 변경한다.

(Cart.js)
import { changeName, increase } from './../store/userSlice.js';

 

 

 

 

 

 

 

* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.