(React Redux) The whole state restarts and deletes all changes made when I add a new item

Question

The reducer goes like this:

import {
    CREATE_COUNTRY,
} from "../actions/actionConsts"

export const storeInitialState = {

    countries: [],
    otherThings: 0
}

export default function countriesReducer(prevState = storeInitialState, action) {
    switch (action.type) {
        case CREATE_COUNTRY:
             return {
                ...prevState,
                countries: [
                    ...prevState.countries,
                    action.country
                ]
            }

        default:
            return prevState
    }
}

The action Creator is

export function createCountryActn(country) {
    return {
        type: CREATE_COUNTRY,
        country
    }
}

And the component where I trigger the action


… … … … … 

    createTheCountry = (e) => {
        e.preventDefault()
        
        this.props.createCountry(this.state.name)

        this.setState({
            name: '',
        })
    }

… …… … … …

What would be causing the store's state to be restarting everytime a add a new item?

Rafael

score 0 · Answer 1 · answered Feb 20 '21 at 23:32

I didn´t know at the time what was causing the error, but later I found it.

Everything restarted every time I added a new item, since the way I was calling the function that creates the new item was loosing the reference to e (event), so when I performed

e.preventDefault()

since e didn't have the right value, the default behavior of the page was actually being executed, and it is a refresh.

I'm using class components, and I was calling the function as:

onSubmit={this.createTheActivity}

AND IT HAS TO BE LIKE

onSubmit={(e) => this.createTheActivity(e)}

(React Redux) The whole state restarts and deletes all changes made when I add a new item

1 Answers1