Search code examples
javascriptreactjsreduxreact-reduxreducers

cannot modify the store in Redux


I allow myself to ask for help because I cannot find where the problem comes from, I just want to insert / modify data in my store and impossible, yet it is not my first ...

My store

const initilaState = {
    estimates: [],
    currentEstimate: {
        customer: {},
        products: []
    }

}

add object to proucts array

        case "ADD_PRODUCT_TO_CURRENT_ESTIMATE":

            return {
                estimates: state.estimates,
                currentEstimate: {
                    customer: {},
                    products: [...state.currentEstimate.products, action.payload]
                }
            }

add object to customer object

        case "ADD_CUSTOMER_CURRENT_ESTIMATE":
            return {
                ...state,
                currentEstimate: {
                    customer: action.payload

                }
            }

reducer-error

I don't understand why, normally there is no problem with an empty array.

Even if I remove products from my reducers and want to add a customer, the error goes away but the state doesn't change.

Thank in advance for your help :)

--------estimatesreducer-------------

const initilaState = {
    estimates: [],
    currentEstimate: {
        customer: {},
        products: []
    }

}

export default function estimatesReducer(state = initilaState, action){
    switch (action.type){
        case "GET_ESTIMATES":
            return {
                estimates: [
                    ...action.payload
                ]
            }

        case "DELETE_ESTIMATE":
            return {
                estimates: state.estimates.filter(estimate => estimate.id !== action.payload)
            }

        case "ADD_PRODUCT_TO_CURRENT_ESTIMATE":

            return {
                ...state,
                estimates: state.estimates,
                currentEstimate: {
                    customer: {},
                    products: [...state.currentEstimate.products, action.payload]
                }
            }

        case "ADD_CUSTOMER_CURRENT_ESTIMATE":
            return {
                ...state,
                currentEstimate: {
                    ...state.currentEstimate,
                    customer: action.payload
                }
            }

/*        case "DELETE_PRODUCT_CURRENT_ESTIMATE" :
            return {
                estimates: state.estimates,
                currentEstimate: {
                    ...state.currentEstimate,
                    products: state.currentEstimate.products.filter(product => product.id !== action.payload)

                }
            }*/

        default:
            return state
    }
}

Solution

  • This action deletes your product from currentEstimate

    case "ADD_CUSTOMER_CURRENT_ESTIMATE":
                return {
                    ...state,
                    currentEstimate: {
                        customer: action.payload
    
                    }
                }
    

    You must not forget to set previous state on reducer

    case "ADD_CUSTOMER_CURRENT_ESTIMATE":
            return {
                ...state,
                currentEstimate: {
                    ...state.currentEstimate
                    customer: action.payload
                }
            }
    

    You also forgot to return a state in your first action

    case "ADD_PRODUCT_TO_CURRENT_ESTIMATE":
    
            return {
                ...state
                estimates: state.estimates,
                currentEstimate: {
                    customer: {},
                    products: [...state.currentEstimate.products, action.payload]
                }
            }
    

    UPD: You have 2 actions which remove currentEstimate from the state - GET_ESTIMATES and DELETE_ESTIMATE, so when you call ADD_PRODUCT_TO_CURRENT_ESTIMATE after, you get the error