How to add products dynamically in redux initial state?

Question

I am facing complexity on how to add dynamic products in the redux initial state in the next.js redux part?

Currently in my initial state something like that:

const initState = {
    products: [
        {
            id: 1,
            title: "Long Sleeve Leopard T-Shirt",
            price: 250,
            image: require("../../images/products/img1.jpg")
        },
        {
            id: 2,
            title: "Gildan Men's Crew T-Shirt",
            price: 150,
            image: require("../../images/products/img4.jpg")
        }],
    addedItems:[],
    total: 0,
    shipping: 0
}

That is static and now I want load products here dynamically from a server like Firebase.

I was tried creating a function like addToCart() which is currently working for adding products into the cart but didn't luck on that.

You can see my current cartReducer file from the below link.

Here is the Gist

Answer 1

When you load data dynamically from a server, you can use actions and reducers to update the current state. The initial state should just be an empty object or list. You don't change the initial state dynamically. Instead, you update the current state as you load data.