React) Redux 04_state 변경하기( array/object일 때 )

state에 직접 접근해 수정하기 가능

state가 array나 object일 때에는
state에 직접 접근해 변경해도 잘 변경된다.
redux설치할 때 같이 딸려온 immer.js라이브러리가 state사본을 하나 더 생성해준덕분.
이렇게 수정이 더 편해지기때문에 일부러 문자, 숫자등의 데이터도
array나 object형으로 넣는 경우도 많다.

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    increase(state, a){
      state.age += 1  //state에 바로 접근해서 state객체 수정했음. 
    }
  }
}) 

파라미터action.payload

위의 예시 코드로 어떤 버튼을 눌렀을 때 increase함수를 실행한다고하자.
현재는 한번 누를 때 1씩 증가하도록 짜여져있으나 만약 5,10,n등 증가폭을 다르게 연출해주고 싶다면? 👉 파라미터

<button onClick(())=>{
	dispatch(increase(5))  //마음대로 증가폭 설정해 파라미터로 전달
}></button>

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
    increase(state, action){
      state.age += action.payload;  //action이 파라미터
    }
  }
}) 

여기서 주의깊게 볼 점은 우리가 버튼에 인자로서 증가폭을 설정해준 것을 increase함수안에서 파라미터로 받아올 때 꼭 파라미터 뒤에
.payload를 붙여주어야한다는 점이다.
리덕스 규칙인데 dispatch로 전달한 소포마냥 파라미터의 정보를 받겠다는 의미 정도가 되겠다.
그리고 파라미터는 관습적으로 action으로 명명한다.
이 변경함수 자체를 action이라고 하는데 파라미터로 action자체를 받아 여러 정보들을 활용하는 경우가 많기 때문!

---

slice별로 파일 따로 만들어 관리

store.js안이 slice로 가득차 가독성이 좋지않다면
따로 또 파일을 만들어 slice별로 관리해줘도 좋지않을까?

user라는 slice를 담기위해 상위 폴더, 파일을 만들었다.

• src/store/userSlice.js - export잘 해주고

import { createSlice } from '@reduxjs/toolkit'

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

export default user; //slice export

• src/store.js - import 잘 해오고

import user from './store/userSlice';

• src/pages/Cart.js - 함수만 바로 가져다가 써도된다.

import { changeName, increaseAge } from './../store/userSlice';