在项目前期的时候我们的技术经理提出了所有的state都放进去store,这样的好处是可以统一维护,格式化所有代码,但是我个人对此持有保留意见,在一段时间的书写代码后,今天我和技术经理重新讨论了这个问题,经过一番论证后我们都认为不是所有的state都需要放进去store里面,下面我给出我具体的论证。
首先我们先来看看在Redux Github issues里面作者对这个问题的回答:
Use React for ephemeral state thatdoesn't matter to the app globally and doesn't mutate in complex ways. Forexample, a toggle
in some UI element, a form input state. UseRedux for state that matters globally or is mutated in complex ways. Forexample,
cachedusers, or a post draft.
Sometimes you'll want to move from Redux state to React state (when storingsomething in Redux gets awkward) or the other way
around (when more components need tohave access to some state that used to be local).
The rule of thumb is: do whatever is less awkward.
对于那些不会影响app全局的短暂状态(我认为即大部分UI状态)使用React的方式去处理,并不需要用复杂的方式去实现。例如,一个是某些UI元素的toggle,一个位于表单中的input输入框。而需要使用redux处理的是那些会影响到全局的state或者它会在某些方式上产生剧烈的变化。例如,user的资料,或者 a post draft(不知道是啥东西,没翻译)
有些时候你将从redux中移动state到react中(当存在redux的某些东西变得笨拙的时候)或者反过来,需要从react转移到redux(当更多的其他的组件要拥有获取某些以前被用在本地的state的时候)
唯一的规则是,怎么做不笨拙,就怎么做!
具体到我们的项目中,虽然我们项目使用了antd,但实际上并非我们的UI就是ANTD,对于任何一个项目都不可能只有ANTD的UI,我们往往有处理数据的代码和处理UI的代码,一部分处理UI的代码是ANTD,另一部分则是我们自己写的,我个人认为把视图层和数据层隔离开来,在ANTD的组件上再另行包装自己的组件,然后在数据层去调用是非常好的方法。数据层大部分都是和服务器交互需要的数据,极小部分是和其他同级组件需要沟通的数据,对于这两种数据我个人认为都应该放到store里面去,而在UI层的,全部都扔到它们自己的state去吧!但是要注意封装的组件不要承担处理数据的功能,最好的做法是在数据层处理完后通过标签<>传递给他们,对于数据层要返回的数据可以利用回调函数来实现,具体可以参考ANTD的组件是怎么实现的。
如果全部都写到store里面,我认为至少存在以下两个缺点:
一是代码变得臃肿,还要去针对每一个组件写action和reducer和接口,我认为这对阅读和编写都是极不友善的。
二是store会变得臃肿,难以阅读和维护。