未调用 Redux 选择器

Question

我有以下情况：

我的应用状态中国家/地区列表的选择器

export const getCountries = state => state.countries;

以及使用 reselect 创建的选择器以过滤具有特定 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 实际上不是选择器。 returns选择器是一个函数。

鉴于您正在尝试为每个组件使用唯一 ID 并进行过滤，您可能需要使用 the "factory function" form of mapState to create a unique selector instance per component instance 来获得正确的记忆行为。

不过，话虽如此，您的选择器也可以简化。你在这里不需要 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)
    }
};

未调用 Redux 选择器

Redux Selector not called

reactjs

redux

reselect