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

1. 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
            })
        })
}

1. 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:

1. include: :purchase_cart ---> in the index and show methods
2. 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!