Written by Parkdev
on January 23, 2024

[React] Redux2 - state를 변경해보자

리덕스(Redux) 심화과정 - state를 변경해보자

값을 변경하려면 Slice안에 값을 어떻게 변경할것인지 미리 정의해야한다.

let user = createSlice({ //
    name: 'user', 
    initialState : 'kim',
    // 값 변경하기 위해 추가해야하는 reducers
    reducers : {
        changeName(state) {
            return 'john ' + state
        },
        // hamsu2() {} 와 같이 함수를 여러개 추가할 수 있다.
    }
})
// 함수를 외부에서도 사용하기위해서 export
export let { changeName } = user.actions

//Cart.js (함수를 사용할 컴포넌트 파일)
import { useDispatch, useSelector } from 'react-redux'

function Cart() {

	let a = useSelector((state) => state.items)
    //Dispatch는 store.js로 요청을 보내주는 함수로 이를 사용해야 store.js에서 정의한 함수 사용이 가능하다.
    let dispatch = useDispatch()
    
    return (
        //Dispatch로 감싼 함수로 작성
        <button onClick={()=>dispatch(changeName()) }>+</button>
    )

왜 이렇게 복잡하게 함수를 사용할까?

웹사이트 사이즈가 커지면서 함수가 많아지면, 함수를 사용함에 store.js에 있는 함수를 사용하지않으면 버그 추적이 어렵다.
- 예를 들면 여러 컴포넌트에서 해당 값을 사용하면서 직접 변경을 진행하는 방식으로 코드를 작성한다면, 버그가 발생했을대 어느 컴포넌트에서 버그가 발생했는지 찾기 어려울 것이다.
~~Redux 만든 사람이 이런식으로 작성하래요~~

← → Top