Redux - action 파라미터 / 파일 분리하기

state 변경함수에 파라미터 뚫는 법

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

state 변경함수에 파라미터를 줄 수 있다. 그래야 훨씬 간편하게 바꿔서 쓸 수 있으니까...

기본으로 넣은 state 뒤에 추가하면 된다.

changeAge(state , a){ //여기
  state.age += a;
}

근데 여기서 그냥 a 하고 끝. 이게아니고

changeAge(state , a){
  state.age += a.payload; // 여기
}

a.payload 라고 붙여줘야 한다.
아마 그건거 같음~ 헤더 다 떼고 정말 내용만 있는 그 페이로드 말하는건듯.
저렇게 .payload 붙여주면 파라미터자리에 들어있던 숫자가 들어온다.

참고: 파라미터는 주로 action 이라고 작명한다

파라미터를 작명할때 주로 action이라고 많이들 작명하는데 이 화물(payload) 뿐만 아니라 이 action에 대한 여러가지 정보들도 들어있기 때문이다

action이 뭐임?

ㄴ state 변경함수들을 전부 action 이라고 함

(이전에 GPT가 설명해준 거 보면 정확히는 함수들을 설명해놓은 객체라는 것 같지만 일단은 이렇게만 이해해도 될 것 같다)

---

store에 있는 state 다른 파일로 분리하기

store에 담겨있는 state 를 다른 파일로 분리할 수도 있다.
createSlice< 얘 잘라서 분리시키면 됨.

store.js

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

1. 이걸 통째로 잘라서

2. js 파일을 하나 만들어 복붙

let user = createSlice({
  name: "user", 
  initialState: { name: "kim", age: 20 }, 
  reducers: {
    changeName(state) {
      state.name = "park";
    },
    changeAge(state, a) {
      state.age += a.payload;
    },
  },
});

위에 필요한 거 import 해주는 거 잊지 말아야함!!!

import { createSlice } from "@reduxjs/toolkit";

3. export

export default user;
export let { changeName, changeAge } = user.actions; 
// reducers에 있던 함수들도 이렇게 내보내줘야

4. store.js에서 import

import { configureStore, createSlice } from "@reduxjs/toolkit";
import user from "./store/userSlice.js";