Redux的State不应该全部放在Store里
使用了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
Redux的State不应该全部放在Store里的更多相关文章
- react中界面跳转 A界面跳B界面,返回A界面,A界面状态保持不变 redux的state方法
在上一篇文章中说过了react中界面A跳到B,返回A,A界面状态保持不变,上篇中使用的是传统的localStorage方法,现在来使用第二种redux的state方法来实现这个功能 现在我刚接触red ...
- Ext.js的store里放model,还是field?
按别人的经验, 一般来说,如果通用性强的应用,STORE里存放MODEL,便于重用代码. 如果通用性较弱的(报告,图表),则考虑使用field进行定制.
- 一个App从创意到最终上架到App Store里的整个过程是怎样的?
一个App从创意到最终上架到App Store里的整个过程是怎样的? 制作App需要什么软件?应该看什么书?需要哪些设备?推到App Store里,需要注册什么网站?是否需要付费?需要什么证书之类的? ...
- VR中为什么需要把游戏音频放在聚光灯里?
VR中为什么需要把游戏音频放在聚光灯里? 本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/de ...
- [Functional Programming ADT] Initialize Redux Application State Using The State ADT
Not only will we need to give our initial state to a Redux store, we will also need to be able to re ...
- 动手实现 Redux(二):抽离 store 和监控数据变化
上一节 的我们有了 appState 和 dispatch: let appState = { title: { text: 'React.js 小书', color: 'red', }, conte ...
- sql之表连接 筛选条件放在 连接外和放在连接里的区别
使用一个简单的例子,说明他们之间的区别 使用的表:[Sales.Orders]订单表和[Sales.Customers]客户表,和上一篇博客的表相同 业务要求:查询出 : 所有的用户 在 2012-1 ...
- LSM Tree 学习笔记——本质是将随机的写放在内存里形成有序的小memtable,然后定期合并成大的table flush到磁盘
The Sorted String Table (SSTable) is one of the most popular outputs for storing, processing, and ex ...
- Java的常量接口思考,项目中的常量是放在接口里还是放在类里呢?
最近在看一本书 Java与模式,里面提了一句不建议使用常量接口,甚至举了个java源码的反例, 蛋疼的是没有说为什么? 查了网上一圈发现他们也是知道怎么做而不知道为什么这么做. 然后我只能找谷歌了,翻 ...
随机推荐
- jmeter常用测试元件
1.线程组 线程组是任何测试计划的起点,所有的逻辑控制器和采样器都必须放在线程组下.其他的测试元件(例如监听器)可以直接放在测试计划下,这些测试元件对所有的线程组都生效. 每一个JMeter线程都会完 ...
- 接口测试工具postman(六)添加变量(参数化)
1.添加全局变量并引用 2.通过设置请求前置配置变量 3.在Tests里面,把响应数据设置为变量 4.添加外部文件,引用外部文件中的变量和数据,此种场景就可以执行多次请求 1)配置文件,txt或者cs ...
- Objective-C 构造方法 分类 类的深入研究
构造方法 1.对象创建的原理 new的拆分两部曲 Person *p = [Person alloc]; 分配内存(+alloc) Person *p = [p init]; 初始化(-init) 合 ...
- HDU - 3415(DP + 单调队列)
链接:HDU - 3415 题意:给出一个包含 n 个数的环,求满足长度大于 0 小于等于 k 的最大区间和. 题解:将数组加倍,形成环.求一个前缀和sum.枚举每一个sum[i],以 i 结尾的最大 ...
- leetcode-电话号码的字母组合
电话号码的字母组合 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母. 示例: 输入:"23" ...
- JavaScript 的一些基础知识
JavaScript基本语法 调试 打开 Chrome 开发工具 Win F12 Mac Command + Option + I 输入代码.测试执行 var str = 'evenyao' cons ...
- 从零开始的Python学习Episode 2——运算符与while循环
一.算术运算符 加法:+,减法:-,乘法*,除法/,整除(地板除)//,取余%,乘方**. 二.逻辑运算符 且:and,或:or,非:not 优先级:not>and>or 短路原则: 对 ...
- CryptoZombies学习笔记——Lesson1
CryptoZombies是一个学习以太坊开发的平台,我将在这里记录学习过程中的一些笔记. 课程网址:cryptozombies.io 首先是第一课——Lesson1:Making the Zombi ...
- 6.hdfs的存储过程
1.hdfs 怎么存储 切割存储 2. 为何每块是128m 与io读写速度有关,一般人的接受速度1s中,而磁盘的读写速度为100m/s,在读取文件时候需要硬盘寻找地址,一般读懂速度和寻找之间的比例是1 ...
- ChromeSwitchySharp代理设置步骤
步骤: 1.新增情景模式配置如下: 2.设置切换规则 3.先“直接连接”进行登录:然后切换到“自动切换模式”访问对应url