6. Redux-ToolKit [ State 다루는 몇가지 팁들 ]

1. UI (Modal, Notification 등 ...) 의 State 는, 따로 StateSlice를 통해 다루는 것이 유지보수에 좋다.

<UI 전용 Slice>

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

    const UISlice = createSlice({
        name : ...,
        initialState: ...,
        reducers:{
            toggleCart(){
                state.showCart = !state.showCart
            }
            toggleNofitication(){
                state.showNoti = !state.showNoti
            }
            ...
        }
    })

    
<사용>

    function App() {        
        const showCart = useSelector((state) => state.ui.showCart);

 

 

2. 객체에서 따로 뺀 값을 변경해도, 객체 원본이 변한다는 사실을 잊지 말자.

[복습. 들어가기 전에 참조함수에 대하여! [STATE 변경하는 꿀팁]]

        const obj1 = [
            { x: 1, y: 5, z: 3 },
            { x: 3, y: 3, z: 7 },
        ];
        const sameId = obj1.find((item) => item.x === 1);
        console.log(sameId); 	// {x:1, y:5, z:3}
        sameId.y = 10;
        console.log(sameId); 	// {x:1, y:10, z:3}

    원본 배열 객체에서, 한가지 객체만을 빼서, 변경하면, 원본 배열 객체가 변경된다.

[리덕스툴킷도 마찬가지이다]

    이것을 생각하고 다음으로 넘어가자

"State 에 맞춰, 값이 변경되는 함수를 만들때"

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

    cosnt xxSlice = createSlice({
            ...
        reducers:{
            addItmes(state,action){
                const newItem = action.payload 
                const existingItem = state.items.find((item) => (item.id === newItem.id))   // 객체(state)에서 뺀것이므로, existingItem 을 변화시켜도, 원본이 변형됌
                state.totalQuantity++;          // 총량은 변경

                if(!existingItem){
                    state.items.push({          // 없다면 푸쉬 [리덕스 툴킷이므로, STATE에 직접 관여 가능(실은, 툴킷의 내부함수가 그렇게 되지 않도록 변형, 적용 시키는것이지만)]
                        id:newItem.id
                            ...
                    })
                } else{
                    existingItem.quantity = existingItem.quantity + 1                   // 객체에 담겨있는 "existingItem 직접 변경 => 원본도 변형 => 진짜 State가 변화" [이게 키포인트]
                    existingItem.totalPrice = existingItem.totalPrice + newItem.price
                }
            }
        }
    })
    
   
** 키포인트 : "객체에서 따로 뺀 값을 변형해도, 원본이 변형된다."
** 원본 변화를 통해, 코드가 간결해지고 가독성이 높아진다.

 

3. "전체 앱에 적용되는 모달의 State는 App.js 처럼 가장 비어있고, 보기좋은 곳에 넣는게 좋겠다."

   [dispatch 는 직접 사용하는 곳에서]

 

<App.js>
    import Header from "./components/Header";
    import Auth from "./components/Auth";
    import { useSelector } form "react-redux"

    function App() {        
        const showCart = useSelector((state) => state.item.showCart);
        return (
            <Fragment>
                {showCart && <Cart/>}       // 이렇게 위치만 [ dispatch 는 직접 카트를 띄우는 쪽에서 하는게 좋겠다.]
                <Counter />
            </Fragment>
        );
    }