새로 고침 후에도 반응 상태를 유지하는 방법!!!

참고: 약간의 REDUX 툴킷 지식이 필요합니다.

때때로 우리는 브라우저를 새로 고친 후 일부 상태 값이 지속 이벤트가 되기를 원합니다. 예를 들어 다크 모드 또는 카트의 항목과 같은 특정 웹 앱에 대한 일부 설정입니다.

이를 위해 localstorage를 사용할 수 있습니다. Localstorage는 이와 같은 설정을 저장하는 브라우저 내장 메모리입니다.

예를 들어 보겠습니다.

아래와 같은 장바구니 객체가 있다고 가정합니다.

cartItems = {
cartItems: localStorage.getItem('cartItems') ? JSON.parse(localStorage.getItem('cartItems')) : [],
    cartTotalQuantity: 0,
    cartTotalAmount: 0
}

cartItems : 'cartItems' 키의 localstorage에서 항목을 가져오거나 카트가 비어 있으면 빈 배열을 반환한다고 명시하고 있습니다.

const cartSlice = createSlice({
    name: 'cart',
    initialState,
    reducers: {
        addToCart(state, action) {
            const itemIndex = state.cartItems.findIndex((item) => item.id === action.payload.id);

            if (itemIndex >= 0) {
                state.cartItems[itemIndex].cartQuanity += 1;
                toast.info(`increased ${state.cartItems[itemIndex].name} cart quantity`, {
                    position: 'bottom-left'
                });
            }
            else {
                const tempProd = { ...action.payload, cartQuanity: 1 };
                state.cartItems.push(tempProd);
                toast.success(`${action.payload.name} Added To The Cart`, {
                    position: 'bottom-left'
                });
            }
            localStorage.setItem('cartItems', JSON.stringify(state.cartItems))
        }
    }
})

🥔