react redux状态管理问题

最近遇到一个困惑如下:

假设通过请求获取到一份原始商品列表,我将它存在store中

state = {
    products:[...]
}

在某个组件中,用户可以隐藏一些自己不关心的商品(ps:不是删除,类似于要添加一个show:false属性)。我自己想了几种方法:

一、直接给products中每一项增加一个show属性。
二、在store中再创建一个products的备份productsCopy,再增加show属性。
三、把products存一份到这个组件的私有state中。

问题是:
1、方法一中,当增加的字段越来越多后,请求products接口后需要做的初始化工作会很多。
2、对于其他组件不关心的状态,我感觉放redux store中不是很好的选择,而且需要写action、reducer、constant、写各种import等,代码量很多。
3、方法三需要在componentWillReceiveProps中监听products的变化,再同步到私有state中。感觉也有点麻烦,而且不容易区分是props.products变化还是其他props变化。

想问下大家平时是怎么处理的?有没有更好的解决方法?

阅读 2.7k
2 个回答

我的话会选第一种,给store中products的项增加一个show属性,然后mapStateToProps时,做select(可能会用reselect库,做select的缓存),筛选出show为true的products...
为什么不存一份到这个组件的私有state中?
因为我觉得:

  1. 通过props改变state,是反模式的,它违背了单一数据源,使得数据流变得复杂
  2. 存放在state中,组件销毁时,state中的值也会销毁;用户隐藏products后,退出当前组件,再次进入组件时,应该不会希望,隐藏的products又显示出来了。所以肯定依旧需要将product show还是hide,存在应用级。

数据只存一份,添加字段就好了。而且,你使用了redux,componentWillReceiveProps方法就没必要使用了。

我的做法,只操作这一份数据。在不需要显示的数据上加个show: false。就好了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题