Redux vs Ruby

There are two parts to redux: a reducer and action. An action is where you can fetch data from an API and get access to the backend's current state. A reducer on the otherhand gets to determine how the state will be updated on the frontend.

For my project, I was trying to create a mini-ecommerce website. The project was simple. I was going to have a store with projects and have a button that could add a product to a cart. It should have been simple until I reached the reducer.....

In RUBY my settings were:

An API, which had...

Routes:

resources :cart do
--resources :purchase_carts
end
resources :products

In REDUX...

the ACTION fetched to get products, get a cart and ADD a product to the cart

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 contained this code...

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}
    }
}

Everything looks okay.... but when testing... the product would not add more than 1 to the cart.

On the frontend, everything in REDUX and in my components were coded to function the way I designed it. In the reducer, the would return with all the state already included, plus a key-value pair of cart and updatedCart. This updatedCart would show everything in the state's first cart, then create another key-value pair for purchase_carts and create an array with all the state's first cart's purchase_carts and all information from the component's form which was posted into the backend's API and retranslated as the "action.payload."

So what was wrong?

What I discovered was the problem was so..... simple. In RUBY, my routes had purchase_carts inside of cart. So to see this on localhost:3000, I needed to:

include: :purchase_cart ---> in the index and show methods

include :purchase_cart in the attributes for my models

THAT'S IT!

Why did I have to do this?
In my reducer, I wanted to add all information from my form into purchase_cart which was my joins table so that my cart could have access to the product (which was also inside the joins table). But to access purchase_cart it needed to show it was properly posted in my API before the state could be properly updated on the frontend.

LESSON?

Before you play with the frontend, check the backend!