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

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

(store.js)

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

changeName() 사용시 변경 이름이 'park'으로 변경될 것이다.
return 오른쪽에 적은걸로 기존 state를 갈아치워주니까.

근데 state를 직접 수정하라고해도 변경이 잘 된다.
state를 직접 수정하는 문법을 사용해도 잘 변경되는 이유는
Immer.js 라이브러리가 state 사본을 하나 더 생성해준 덕분인데
Redux 설치하면 같이 설치되기 때문이다.
결론은 array/object 자료의 경우 state변경은
state를 직접 수정해버려도 잘 되니까 직접 수정하자.

위 코드를 직접 수정한 코드이다.
(파라미터에 기존 state를 담아서 state.name = 'park' 으로 바로 변경)
(store.js)

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

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

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

퀴즈 2개

1. age를 +1 씩 증가하는 버튼을 만들어보기

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

이렇게 increase라는 함수 만들고
export 하고
필요한 곳에서 import 해서 dispatch(increase()) 하면 +1 된다.

2. age를 10씩 100씩 하는 함수를 만들어보기

   함수는 파라미터문법 이용하면 비슷한 함수 여러개 만들 필요가 없다.
   stat e변경함수에도 파라미터문법 사용가능함

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

state변경함수의 둘째 파라미터를 작명하면(action) 이제
increase(10)
increase(100)
이런 식으로 파라미터입력을 해서 함수사용이 가능하다.
파라미터자리에 넣은 자료들은 a.payload 하면 나온다.

• 둘째 파라미터는 보통 action이라고 작명을 많이한다.
• action.type 하면 state변경함수 이름이 나오고
• action.payload 하면 파라미터가 나온다.

그래서 위처럼 코드 작성해놓으면
increase(10) 실행하면 +10
increase(100) 실행하면 +100 이 출력된다.

파라미터문법을 이용하면 비슷한 함수들은 여러개 만들 필요가 없다❗❗

파일 분할

코드가 길어서 보기싫으면 코드 덩어리들을 다른 파일로 빼면 된다.
const user 변수와 state변경함수 export 부분을
store폴더/userSlice.js로 빼봤다.

(store.js)

import { configureStore, createSlice } from '@reduxjs/toolkit'
import user from './store/userSlice'

const stockStuff = createSlice({
  name: 'stockStuff',
  initialState: [10, 11, 12]
})

const userData = createSlice({
  name: 'userData',
  initialState: [
    {id : 0, name : 'White and Black', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1} 
  ]
})

export default configureStore({
  reducer: { 
    user: user.reducer,
    stockStuff : stockStuff.reducer,
    userData : userData.reducer
  }
})

(userSlice.js)

import { configureStore, createSlice } from '@reduxjs/toolkit'
const user = createSlice({
  name: 'user',
  initialState: {name: 'kim', age: 20},
  reducers : {
    changeName(state){
      state.name = 'park'
    },
    increaseAge(state, action){
      state.age += action.payload
    }
  }
})
export const {changeName, increaseAge} = user.actions

export default user

배운 import export 문법을 잘 활용해보자 ❗