이번 포스트는 Redux의 state를 변경하는 법에 대해 다루어보겠다

규모가 작은 프로젝트라면 직접 state를 변경해주면 되지만

프로젝트가 커지면 이렇게 변경해주다가는 오류가 발생했을때 찾지 못하는 경우가 허다하다

근데 state 수정함수를 store.js에 미리 만들어두고
컴포넌트는 그거 실행해달라고 부탁만 하는 식으로 코드를 짜놓으면
'kim'이 123이 되어버리는 버그가 발생했을 때 범인찾기가 수월합니다.
범인은 무조건 store.js에 있으니까요

변경 하는 순서 (1)

store.js에서 먼저 만들어놓은 user 변수 안에서 변경 함수를 만들어 주어야 합니다.
reducers <<<

import { createSlice, configureStore } from '@reduxjs/toolkit'

let user = createSlice( { 
	name : 'user',
    initialState : 'kim'
  -----------------------------
  	reducers: {
	changName(state){
		return 'Seo donggyu'
	}
  }
  // return 우측에 새로운 state 값을 입력해주면 initialState를 갈아치워 줍니다
  ------------------------------
})

export let { changName } = user.actions

// slice이름.actions 라고 적으면 state 변경함수가 전부 그 자리에 출력됩니다.

// 그걸 변수에 저장했다가 export 하라는 뜻일 뿐임 

export default configureStore({
  reducer: {
    user : user.reducer
  }
}) 

저처럼 글만 읽어서는 모르는 분을 위해 친절하게 캡쳐본도 올려드립니다🎃

이제 Cart.js에서 변경함수를 활용해보도록 하겠습니다

항상 사용하기 전에 import 해줍시다

(Cart.js)

import { useSelector, useDispatch } from "react-redux"
improt { changName } from "./../store.js"

let Cart = ()=>{
  
  	let user = useSelctor((state)=>state.user);
  	console.log(user);
 	 // 항상 잘 출력되는지 콘솔 찍어서 확인해봅시다
  	let dispatch = useDispatch();
  	// 
  
	return(
        <thead>
            <tr>
                <th>이름</th>
            </tr>
            <tr>
                <th>{user}</th>
                <tr><button onClick={() => {
                    dispatch(changeName())
                }}>이름 변경</button></tr>
            </tr>
        </thead>
    	
    )
}

useDispatch란? store.js에게 요청을 보내주는 함수이다