react-redux 当前道具值

Question

我在页面上有三个按钮，当单击任何按钮时，我想从按 id 过滤的商店中获取所选值（在 reducer 中完成）。我正在尝试将 redux 与 mapStateToProps 和 mapDispatchToProps 模式一起使用，但看起来当我在单击任何按钮后尝试从商店访问当前选定的值时，它不会在控制台中反映正确的值。这不是如何使用“this.props.anyPropValue”吗？你能帮助澄清我的例子中有什么问题吗？ 第一次单击任何按钮时打印默认值，再次单击将打印先前单击的按钮值而不是当前值。

这是我为上面创建的简单应用程序的沙盒链接

sandbox link of the code

Answer 1

您编写的大部分代码都是正确的，如果您希望在调用操作后立即看到更新的输出，那将无法正常工作

onGetCountryById(id) {
    this.props.fetchCountryById(id);
    console.log(this.props.country); // This will gives you the current country (We just update the state, but still that value didn't update the component)
}

尝试在下面的 html 中打印国家/地区的值，您会看到它正在更新

{this.props.country === null ? "default" : this.props.country.name}

在reducer中你可能需要做这个改变

case CountryActions.FETCH_COUNTRY_BY_ID:
    return {
        ...state,
        country: state.countries.find((item) => item.id === action.id) // use find instead of filter
    };

并将国家的初始值设置为null

const initCountriesState = {
    country: null,
    countries: [
        ....
    ]
};

这是更新后的sandbox