添加逻辑到商店？

问题描述：

我有一个“活动”减速机/商店的REDX应用程序。添加逻辑到商店？

目前我有重复的代码来检查是否加载了特定的广告系列或需要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);

问题：这是一个很好的解决方案，还是在终极版结构指望一个不同的模式来解决这个问题？

问题2：我们应该getter方法添加到店，喜欢store.campaign.getItem(myId)增加环卫（确保身份识别码存在且被加载，..）或有在终极版此不同的做法？

答

你的方法有点违背了对redux中状态的习惯理解。 You should keep only serializable data in the state，不是功能。否则，你会失去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);

干净多了！我喜欢这个解决方案 - 它绝对是比我的尝试更好的“减少”解决方案 – Philipp

答

通常计算组件应该负责做这种类型的逻辑。当然你的函数有一个复杂的条件检查，它完全属于你的计算组件（就像你目前拥有它的方式）。

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

添加逻辑到商店？

相关推荐