Redux的State不應該全部放在Store裡

看風景就發表於2018-10-08

使用了redux管理應用的狀態,應用的狀態不應該全部放在Store裡面。

前端狀態主要有一下兩種:

1. Domain data

2. UI State


1. Domain data

來自於服務端對領域模型的抽象,比如user,product,這個應該放在Store,方便更新data

2. UI State

大部分的UI State不應該放在Store中,應該使用元件私有state。

1. UI層面的toggle狀態

主要包括 元件的顯示隱藏,按鈕的disable,列表的摺疊展開等

2. 表單中的input的state

3. 元件中的動畫相關的狀態,例如座標值


總之,Redux中的State遵循以下原則:

1. 怎麼不笨拙,就怎麼做
2. 需要全域性共享的狀態,才需要放在Store中,不影響app全域性的短暫狀態,放在元件內部
3. 一個元件內部的狀態,頻繁修改,若放在store中,則會頻繁更新store,由此產生的state的快照也沒有意義
4. 控制元件的state不會對任何其他控制元件產生影響,也不依賴store中的state時,就應該鎖在控制元件內,不要放出了汙染Store
5. 常見的一些頻繁更新的狀態,元件的style的height屬性,應該作為私有狀態,掛在eventlistener上來動態更新,
form表單中的input的state,應該是私有狀態,不應該放在Store中,輸入一個‘hello world’,產生11個state快照
顯然沒有意義,還會影響效能,不迷信一些開源元件,例如 redux-form 的做法
6. 私有的UI State放在Store,使用action進行切換,會增加額外的程式碼量,不會產生任何收益 

 

參考:https://segmentfault.com/a/1190000009540007
     https://www.jianshu.com/p/b53204339730
     http://react-china.org/t/redux/8436
     https://blog.csdn.net/a986597353/article/details/78646301

相關文章