javascript - 向商店添加逻辑？

Question

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

目前我已经重复代码来检查是否加载了特定的事件或需要 API 调用来从数据库中获取详细信息。大大简化了它看起来像这样:

// 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 结构需要不同的模式来解决这个问题？

问题 2:我们是否应该向商店添加 getter 方法，如 store.campaign.getItem(myId) 以添加卫生(确保 myId 存在并已加载， ..) 或者在 redux 中有不同的方法吗？

Answer 1

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

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