Cannot remove an item after back button is pressed - redux

Question

I'm working with Redux in my country app project and whenever I press the back button and try to remove some saved comparable countries, it does not do anything.
Here is a gif representation:
As you can see in the gif representation, I checkmark a total of 5 countries and remove 2 (on the same screen) which works fine. But when I press the Compare button and remove Albania for example, the country is not removed.
I went to the Redux Dev Tools for Google Chrome and it read that the remove action is unchanged (same state) and I don't know why it's doing this.
Here is my code:
Flags reducer
const flagsInitialState = {
compare: false,
compareCountries: [],
countryChecked: new Map()
}
export default ( state = flagsInitialState, action ) => {
switch( action.type ) {
case 'COMPARE_MODE':
return {
...state,
compare: ! state.compare
}
case 'ADD_COUNTRY_TO_COMPARE':
return {
...state,
compareCountries: [ ...state.compareCountries, action.country ]
}
case 'REMOVE_COUNTRY_TO_COMPARE': // <-- This is the action that does not remove an item when the back button is pressed
return {
...state,
compareCountries: state.compareCountries.filter( compareCountry => compareCountry !== action.country )
}
case 'SET_COUNTRY_MAPPING':
return {
...state,
countryChecked: state.countryChecked.set( action.name, action.checked )
}
default:
return state
}
}
Flags actions
export const switchCompareMode = () => ({
type: 'COMPARE_MODE'
})
export const addCountryToCompare = country => ({
type: 'ADD_COUNTRY_TO_COMPARE',
country
})
export const removeCountryToCompare = country => ({
type: 'REMOVE_COUNTRY_TO_COMPARE',
country
})
export const setCountryMapping = ( name, checked ) => ({
type: 'SET_COUNTRY_MAPPING',
name,
checked
})
CountriesPage.jsx
const onCompareClick = ( country, e ) => {
const checked = e.target.checked
const name = e.target.name
props.dispatch( setCountryMapping( name, checked ) )
if ( props.countryChecked.get( name ) ) {
props.dispatch( addCountryToCompare( country ) )
} else {
props.dispatch( removeCountryToCompare( country ) )
}
}

Answer 1

After much thinking, I finally came around fixing it! I just needed to compare the country name strings rather than the country objects.
case 'REMOVE_COUNTRY_FROM_COMPARE':
return {
...state,
compareCountries: state.compareCountries.filter( compareCountry => compareCountry.name !== action.country.name )
}
Thanks for the help anyway guys!