36
loading...
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
--resources :purchase_carts
end
resources :products
In REDUX...
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
})
})
}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:
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.
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?
36