React-Redux action not taking effect

Question

I am trying to change the store of redux when an input has been changed. I have my input with the property on change as it follows:

 onChange= {(event, value) => { if(value) { addCountry(value) console.log(countries) }

countries, (the one im console loggin), is what I want to be changed when I dispatch addCountry with its value.

The addCountry action is this one:

export function addCountry(name) {
  return {type: 'ADD_COUNTRY', payload: name }
}

And my reducer works like this:

const initialState = {
  countries: ['World'],
};

function rootReducer(state = initialState, action) {
  
  if(action.type === 'ADD_COUNTRY'){
    return {
      ...state,
      countries: [...state.countries, action.payload]
    }
  }

}

export default rootReducer;

I dont understand, everytime I change the input, and then console.log(countries) as showed before, it console logs the same, as if it was working asynchronously, but I understand redux works synchronously.

If you are worried im not connecting my component to the store as I should let me show you im doing it right:

// MapStateToProps for access to specific items of the store-state
function mapStateToProps(state) {
  return {
    countries: state.countries,
  };
}

// MapDispatchToProps to directly dispatch an action when called in this component
function mapDispatchToProps(dispatch) {
  return {
    addCountry: (name) => dispatch(addCountry(name)),
  };
}

// Connects the Component with the store
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CountrySelect);

Im trying to display a chart with the info of countries, if countries does not change, neither does my chart, so I need to solve this.

Answer 1

but I understand redux works synchronously.

Sort of. It's not using promises, but it's still React, which means countries won't be updated until the next render.

Since you are using hooks, you probably want it to look like:

useEffect(() => {
    console.log(countries);
}, [countries]);

If you still don't get a console.log , then you need to figure out where it's failing. I would do:

export function addCountry(name) {
    console.log('ADD_COUNTRY payload created with ' + name);
    return {type: 'ADD_COUNTRY', payload: name }
}

// MapDispatchToProps to directly dispatch an action when called in this component
function mapDispatchToProps(dispatch) {
    return {
        addCountry: (name) => {
            console.log('addCountry dispatched');
            dispatch(addCountry(name)),
        }
    }
}

function rootReducer(state = initialState, action) {
    if(action.type === 'ADD_COUNTRY'){
        console.log('ADD_COUNTRY state updating')
        return {
            ...state,
            countries: [...state.countries, action.payload]
        }
    }
}

 onChange= {(event, value) => {
     console.log('onChange called');
     if(value) {
         console.log('onChange if');
         addCountry(value)
         console.log(countries)
     }
 }

and figure out where the breakdown is.