Не удается удалить элемент после нажатия кнопки «Назад»

Question

Я работаю с Redux в своем проекте приложения для страны, и всякий раз, когда я нажимаю кнопку «Назад» и пытаюсь удалить некоторые сохраненные сопоставимые страны, он ничего не делает.

Вот представление gif:

Как вы можете видеть в представлении gif, я отмечаю в общей сложности 5 стран и удаляю 2 (на том же экране), что отлично работает.Но когда я нажимаю кнопку Сравнить и удаляю Албанию , например, страна не удаляется.

Я зашел в Redux Dev Tools для Google Chrome и прочиталчто действие удаления не изменилось (то же состояние), и я не знаю, почему оно это делает.

Вот мой код:

Флажок редуктор

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
    }
}

Флагидействия

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
})

CountryPage.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

После долгих раздумий я наконец-то пришёл к починке! Мне просто нужно было сравнить название страны строк , а не страну объектов .

case 'REMOVE_COUNTRY_FROM_COMPARE':
  return {
    ...state,
    compareCountries: state.compareCountries.filter( compareCountry => compareCountry.name !== action.country.name )
  }

Спасибо за помощь, парни!