向存储添加逻辑

Add logic to the store?

本文关键字：添加 存储      更新时间：2023-09-26

我有一个带有"campaign" reducer/store的redux应用程序。

目前我有重复的代码来检查是否一个特定的活动被加载或需要一个API调用从DB获取详细信息。简化后如下:

// Reducer ----------
export default campaignReducer => (state, action) {
    const campaignList = action.payload
    return {
        items: {... campaignList}
    }
}
// Component ----------
const mapStateToProps = (state, ownProps) => {
    const campaignId = ownProps.params.campaignId;
    const campaign = state.campaign.items[campaignId] || {};
    return {
        needFetch: campaign.id 
            && campaign.meta 
            && (campaign.meta.loaded || campaign.meta.loading),
        campaign,
    };
}
export default connect(mapStateToProps)(TheComponent);

现在我不想重复needFetch的复杂条件。我也不喜欢在mapStateToProps函数中有这些复杂的代码，我想要一个简单的检查。所以我想到了这个解决方案:

// Reducer NEW ----------
const needFetch = (items) => (id) => { // <-- Added this function.
    if (!items[id]) return true;
    if (!items[id].meta) return true;
    if (!items[id].meta.loaded && !items[id].meta.loading) return true;
    return false;
}
export default campaignReducer => (state, action) {
    const campaignList = action.payload
    return {
        needFetch: needFetch(campaignList), // <-- Added public access to the new function.
        items: {... campaignList}
    }
}
// Component NEW ----------
const mapStateToProps = (state, ownProps) => {
    const campaignId = ownProps.params.campaignId;
    const campaign = state.campaign.items[campaignId] || {};
    return {
        needFetch: state.campaign.needFetch(campaignId), // <-- Much simpler!
        campaign,
    };
}
export default connect(mapStateToProps)(TheComponent);

问题:这是一个很好的解决方案，还是redux-structure期望一个不同的模式来解决这个问题?

问题2:我们是否应该在存储中添加getter方法，就像store.campaign.getItem(myId)添加卫生(确保myId存在并加载，…)，或者在redux中有不同的方法?

通常计算组件应该负责执行这种类型的逻辑。当然，您的函数具有复杂的条件检查，它完全属于您的计算组件(就像您目前拥有它的方式一样)。

同样，redux仅用于维护状态。没有理由在reducer中添加方法来查询当前状态的值。更好的方法是使用专门用于解析状态的模块。然后，您可以将状态传递给模块，模块将提取相关信息。让你的redux/store代码只专注于计算状态

您的方法有点违背redux中对状态的习惯理解。在状态中应该只保留可序列化的数据，而不是函数。否则，你就失去了redux的许多好处，例如，你可以很容易地将应用程序的状态隐藏到本地存储中，或者从服务器提取它来恢复以前的会话。

相反，我会将条件提取到一个单独的库文件中，并在必要时将其导入到容器组件中:

// needsFetch.js
export default function needsFetch(campaign) {
  return campaign.id
           && campaign.meta 
           && (campaign.meta.loaded || campaign.meta.loading);
}

// Component ----------
import needsFetch from './needsFetch';
const mapStateToProps = (state, ownProps) => {
    const campaignId = ownProps.params.campaignId;
    const campaign = state.campaign.items[campaignId] || {};
    return {
        needFetch: needsFetch(campaign),
        campaign,
    };
}
export default connect(mapStateToProps)(TheComponent);
相关文章：