使用了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里的更多相关文章

  1. react中界面跳转 A界面跳B界面,返回A界面,A界面状态保持不变 redux的state方法

    在上一篇文章中说过了react中界面A跳到B,返回A,A界面状态保持不变,上篇中使用的是传统的localStorage方法,现在来使用第二种redux的state方法来实现这个功能 现在我刚接触red ...

  2. Ext.js的store里放model,还是field?

    按别人的经验, 一般来说,如果通用性强的应用,STORE里存放MODEL,便于重用代码. 如果通用性较弱的(报告,图表),则考虑使用field进行定制.

  3. 一个App从创意到最终上架到App Store里的整个过程是怎样的?

    一个App从创意到最终上架到App Store里的整个过程是怎样的? 制作App需要什么软件?应该看什么书?需要哪些设备?推到App Store里,需要注册什么网站?是否需要付费?需要什么证书之类的? ...

  4. VR中为什么需要把游戏音频放在聚光灯里?

    VR中为什么需要把游戏音频放在聚光灯里? 本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/de ...

  5. [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 ...

  6. 动手实现 Redux(二):抽离 store 和监控数据变化

    上一节 的我们有了 appState 和 dispatch: let appState = { title: { text: 'React.js 小书', color: 'red', }, conte ...

  7. sql之表连接 筛选条件放在 连接外和放在连接里的区别

    使用一个简单的例子,说明他们之间的区别 使用的表:[Sales.Orders]订单表和[Sales.Customers]客户表,和上一篇博客的表相同 业务要求:查询出 : 所有的用户 在 2012-1 ...

  8. LSM Tree 学习笔记——本质是将随机的写放在内存里形成有序的小memtable,然后定期合并成大的table flush到磁盘

    The Sorted String Table (SSTable) is one of the most popular outputs for storing, processing, and ex ...

  9. Java的常量接口思考,项目中的常量是放在接口里还是放在类里呢?

    最近在看一本书 Java与模式,里面提了一句不建议使用常量接口,甚至举了个java源码的反例, 蛋疼的是没有说为什么? 查了网上一圈发现他们也是知道怎么做而不知道为什么这么做. 然后我只能找谷歌了,翻 ...

随机推荐

  1. jmeter常用测试元件

    1.线程组 线程组是任何测试计划的起点,所有的逻辑控制器和采样器都必须放在线程组下.其他的测试元件(例如监听器)可以直接放在测试计划下,这些测试元件对所有的线程组都生效. 每一个JMeter线程都会完 ...

  2. 接口测试工具postman(六)添加变量(参数化)

    1.添加全局变量并引用 2.通过设置请求前置配置变量 3.在Tests里面,把响应数据设置为变量 4.添加外部文件,引用外部文件中的变量和数据,此种场景就可以执行多次请求 1)配置文件,txt或者cs ...

  3. Objective-C 构造方法 分类 类的深入研究

    构造方法 1.对象创建的原理 new的拆分两部曲 Person *p = [Person alloc]; 分配内存(+alloc) Person *p = [p init]; 初始化(-init) 合 ...

  4. HDU - 3415(DP + 单调队列)

    链接:HDU - 3415 题意:给出一个包含 n 个数的环,求满足长度大于 0 小于等于 k 的最大区间和. 题解:将数组加倍,形成环.求一个前缀和sum.枚举每一个sum[i],以 i 结尾的最大 ...

  5. leetcode-电话号码的字母组合

    电话号码的字母组合 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母. 示例: 输入:"23" ...

  6. JavaScript 的一些基础知识

    JavaScript基本语法 调试 打开 Chrome 开发工具 Win F12 Mac Command + Option + I 输入代码.测试执行 var str = 'evenyao' cons ...

  7. 从零开始的Python学习Episode 2——运算符与while循环

    一.算术运算符 加法:+,减法:-,乘法*,除法/,整除(地板除)//,取余%,乘方**.  二.逻辑运算符 且:and,或:or,非:not 优先级:not>and>or 短路原则: 对 ...

  8. CryptoZombies学习笔记——Lesson1

    CryptoZombies是一个学习以太坊开发的平台,我将在这里记录学习过程中的一些笔记. 课程网址:cryptozombies.io 首先是第一课——Lesson1:Making the Zombi ...

  9. 6.hdfs的存储过程

    1.hdfs 怎么存储 切割存储 2. 为何每块是128m 与io读写速度有关,一般人的接受速度1s中,而磁盘的读写速度为100m/s,在读取文件时候需要硬盘寻找地址,一般读懂速度和寻找之间的比例是1 ...

  10. ChromeSwitchySharp代理设置步骤

    步骤: 1.新增情景模式配置如下:   2.设置切换规则   3.先“直接连接”进行登录:然后切换到“自动切换模式”访问对应url