Redux Selector не вызывается

Question

У меня следующая ситуация:

Селектор для списка стран в состоянии моего приложения

export const getCountries = state => state.countries;

И селектор, созданный с помощью повторного выбора, для фильтрации по стране с указанным c id

export const getCountryById = countryId => 
    createSelector(
        [getCountries],
        (countries) => {
            let countriesList = countries.filter(c => c.id === countryId);
            if ( countriesList ) {
                return countriesList[0];
            }
            return null;
        }
    )

Затем есть компонент страницы сведений о стране (доступ через http://localhost: 3000 / country / 4 )

import React from 'react';
import { getCountryById } from '../redux/selectors';
import { connect } from 'react-redux';

const CountryPage = ({country}) => {
    return <h1>{country.name}</h1>
}

const mapStateToProps = (state, ownProps) => {
    console.log(ownProps.match.params.countryId);
    const obj = {
        country: getCountryById(ownProps.match.params.countryId)
    }
    return obj;
};

export default connect(mapStateToProps, null)(CountryPage);

mapStateToProps правильно получает countryId, но селектор не вызывается. Что мне здесь не хватает?

Или это неправильный подход к использованию селекторов? Мне известно, что я могу использовать полный список стран из штата в CountryPage и фильтровать его там, но какова здесь лучшая практика?

Answer 1

Это потому, что ваш getCountryById на самом деле не селектор. Это функция, которая возвращает селектор.

Учитывая, что вы пытаетесь использовать уникальный идентификатор для каждого компонента и выполняете фильтрацию, вам, вероятно, нужно использовать "фабричную функцию" Форма mapState для создания уникального экземпляра селектора для экземпляра компонента для получения правильного поведения запоминания.

Однако, сказав это, ваш селектор также можно упростить. Вам не нужен filter() здесь, вам нужен find(), а это значит, что это не то, что действительно нужно запомнить. Это можно упростить до:

const getCountryById = createSelector(
    [getCountries, (state, id) => id],
    (countries, id) => countries.find(c => c.id === id) || null
)

, а затем использовать как:

const mapStateToProps = (state, ownProps) => {
    return  {
        country: getCountryById(state, ownProps.match.params.countryId)
    }
};