리덕스 대 루비

redux에는 리듀서와 액션이라는 두 부분이 있습니다. 작업은 API에서 데이터를 가져오고 백엔드의 현재 상태에 액세스할 수 있는 곳입니다. 반면에 리듀서는 프론트엔드에서 상태가 업데이트되는 방법을 결정합니다.

내 프로젝트를 위해 미니 전자 상거래 웹 사이트를 만들려고했습니다. 프로젝트는 간단했습니다. 나는 프로젝트가 있는 상점을 갖고 장바구니에 제품을 추가할 수 있는 버튼을 가질 예정이었습니다. 감속기에 닿기 전까지는 간단했어야 했는데.....


RUBY에서 내 설정은 다음과 같습니다.

API는 ...

경로:

리소스:카트 할
--리소스:purchase_carts
끝
자원:제품

REDUX에서...

제품을 가져오고 카트를 가져오고 카트에 제품을 추가하기 위해 ACTION을 가져왔습니다.

   export const addProductToCart = (obj) => {
    return (dispatch) => fetch("http://localhost:4000/cart/1/purchase_carts", {
        method: "POST",
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(obj),
    })
        .then(r => r.json())
        .then(addedProducts => {
            dispatch({
                type: "ADD_PRODUCTS",
                payload: addedProducts
            })
        })
}

REDUCER에 이 코드가 포함되어 있습니다...

export default function reducer(state= intialState, action){
    switch (action.type){
        case "GET_PRODUCTS":
            return {...state, products: [...action.payload]}
        case "GET_CART":
            return {...state, cart: [...action.payload]}
        case "ADD_PRODUCTS":
            const updatedCart = {
                ...state.cart[0],
                purchase_carts: [...state.cart[0].purchase_carts, action.payload]
            }
            return {
                ...state,
                cart:[updatedCart]
            }
        default:
            return {...state}
    }
}

모든 것이 괜찮아 보입니다. 하지만 테스트할 때... 제품은 장바구니에 1개 이상을 추가하지 않습니다.

프론트엔드에서 REDUX와 내 구성 요소의 모든 것은 내가 디자인한 방식으로 작동하도록 코딩되었습니다. 리듀서에서는 이미 포함된 모든 상태와 함께 카트 및 업데이트된 카트의 키-값 쌍이 반환됩니다. 이 업데이트된 카트는 상태의 첫 번째 장바구니에 있는 모든 것을 표시한 다음 purchase_carts에 대한 또 다른 키-값 쌍을 만들고 모든 상태의 첫 번째 장바구니의 purchase_carts 및 백엔드 API에 게시되고 "액션.페이로드."

그래서 무엇이 잘못 되었습니까?

내가 발견한 것은 문제가 너무..... 간단하다는 것이었습니다. RUBY에서 내 경로에는 장바구니 안에 purchase_carts가 있습니다. 따라서 localhost:3000에서 이것을 보려면 다음을 수행해야 했습니다.

다음을 포함합니다: :purchase_cart ---> 인덱스 및 표시 방법

내 모델의 속성에 :purchase_cart를 포함합니다

.

그게 다야!

내가 왜 이 일을 해야 했는가?
내 리듀서에서 내 장바구니가 제품에 액세스할 수 있도록 내 조인 테이블인 buy_cart에 내 양식의 모든 정보를 추가하고 싶었습니다(또한 조인 테이블 내부에 있음). 그러나 구매_장바구니에 액세스하려면 프론트엔드에서 상태를 제대로 업데이트하기 전에 내 API에 제대로 게시되었음을 보여야 했습니다.

수업?

프론트엔드로 플레이하기 전에 백엔드를 확인하세요!