React : state 공유하는 "Redux" (state 변경함수/파라미터/함수분리)

state 변경하는 법

useState()와는 다른 방식을 써야 한다.

1. state를 수정해주는 함수를 만들고,
2. 그 함수를 실행해야 할 때 store.js에 요청해야 한다.

---

store.js에서 state 변경함수 만들기

let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : {
    changeName(){ // state 값 변경함수 1
      return 'Park'
    },
    changeFullname(){ // state 값 변경함수 2
      return 'Kim Noran'
    }
  }
})
export let { changeName, changeFullname } = user.actions // 함수 export

1. store.js에 변경함수를 만든다.
   변경함수에는 state를 매개변수로 활용할 수 있다.
2. 변경함수를 export let { 함수 } = slice이름.actions 형태로 export한다.
   export시에 slice이름.actions라고 적으면 state 변경함수가 전부 그 자리에 출력되는데,
   그걸 let으로 변수에 저장했다가 export하는 원리이다.

컴포넌트에서 변경함수 사용하기

import { useDispatch } from 'react-redux';
import { changeName, changeFullname } from './../store.js';

function Cart(){
  let dispatch = useDispatch()

  return (
    <div>
       <button onClick={()=>{ dispatch(changeName()) }}>+</button>
       ...

1. react-redux에서 useDispatch를 import한다.
2. store.js에서 state 변경함수를 import한다.
3. 변수 dispatch에 useDispatch()를 넣어줬다.
4. 사용시에는 dispatch(함수) 형태로 dispatch로 함수를 감싸 사용한다.
   그래서 dispatch로 감싼 함수는 그 자리에서 실행되는게 아니라, store.js로 요청을 보내 store.js에서 실행한다.

---

state값이 object/array일 경우 변경하는 법

let cart = createSlice({
  name : 'cart',
  initialState : [
    {id : 0, name : 'White and Black', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1}
  ] ,
  reducers : {
    changeName(state){
      state[0].name = 'Pink Lemonade'
    },
    changeCount(state){
      state[0].count = state[0].count + 1;
    }
  }
})

---

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

비슷한 기능인데 여러개 만들면 귀찮다.

...
changeCount(state, action){
  state[0].count += action.payload;
}
...

파라미터자리에 파라미터를 만든 후  해당 파라미터 뒤에 .payload를 붙여주면 된다.
보통 action으로 작명을 많이 한다.

아래는 컴포넌트에서 사용하는 예시

<button onClick={()=>{ dispatch(changeCount(10)) }}>⬆</button> //10이 a다

---

변경함수 분리하는 법

변경함수가 길어질 경우 분리해서 다른 파일로 빼서 쓰자

분리된 파일 - cartSlice.js

import { createSlice } from '@reduxjs/toolkit'

let cart = createSlice({
    name : 'cart',
    initialState : [
        {id : 0, name : 'White and Black', count : 2},
        {id : 2, name : 'Grey Yordan', count : 1}
    ] ,
    reducers : {
        changeName(state){
        state[0].name = 'Pink Lemonade'
        },
        changeCount(state, action){
        state[0].count += action.payload;
        }
    }
})

export let { changeName, changeCount } = cart.actions

export default cart

import받는 파일 - store.js

import cart from './store/cartSlice.js'

...

export default configureStore({
  reducer: {
    cart : cart.reducer,
  }
})

import받는 파일 - 컴포넌트.js

import { changeUser } from './../store.js';
import { changeName, changeCount } from './../store/cartSlice.js';

---

출처 : 코딩애플 https://codingapple.com/