对于Redux的理解
在移动端项目,经常会在不同view中进行传递数据,事件。当事件比较少时,我们可以通过常规的事件流方法,注册,发布事件 进行响应等等。但是项目中一个事件多处响应时候,就会使程序变得相当复杂。在现在的Vue以及React框架中给了不错的解决方案:就是Vue中的Vuex以及React中Redux 这种应用程序状态管理工具。简单理解就是统一管理和维护组件中的可变化状态,今天主要说下 React中的Redux。
理解这个是理解React和Redux的前提。
2. 一般构建的React组件内部可能是一个完整的应用,它自己工作良好,你可以通过属性作为API控制它。但是更多的时候发现React根本无法让两个组件互相交流,使用对方的数据。
然后这时候不通过DOM沟通(也就是React体制内)解决的唯一办法就是提升state,将state放到共有的父组件中来管理,再作为props分发回子组件。
3. 子组件改变父组件state的办法只能是通过onClick触发父组件声明好的回调,也就是父组件提前声明好函数或方法作为契约描述自己的state将如何变化,再将它同样作为属性交给子组件使用。
这样就出现了一个模式:数据总是单向从顶层向下分发的,但是只有子组件回调在概念上可以回到state顶层影响数据。这样state一定程度上是响应式的。
4. 为了面临所有可能的扩展问题,最容易想到的办法就是把所有state集中放到所有组件顶层,然后分发给所有组件。
5. 为了有更好的state管理,就需要一个库来作为更专业的顶层state分发给所有React应用,这就是Redux。让我们回来看看重现上面结构的需求:
a. 需要回调通知state (等同于回调参数) -> action
b. 需要根据回调处理 (等同于父级方法) -> reducer
c. 需要state (等同于总状态) -> store
对Redux来说只有这三个要素:
a. action是纯声明式的数据结构,只提供事件的所有要素,不提供逻辑。
b. reducer是一个匹配函数,action的发送是全局
对于Redux的理解的更多相关文章
- redux的理解
Redux 这里介绍下我对Redux的理解,不涉及如何使用Redux. Redux 官网介绍: A predictable state container for JavaScript apps.(一 ...
- redux深入理解之中间件(middleware)
理解reduce函数 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. arr.reduce([callback, initi ...
- fish redux 个人理解
fish redux 理解 fish redux是什么 Fish Redux 是一个基于 Redux 数据管理的组装式 flutter 应用框架, 它特别适用于构建中大型的复杂应用. 它的特点是配置式 ...
- 对redux的理解
redux原理 某公司有物流(actionType).电商(actionType).广告(actionType)3块业务,在公司财务系统(state)统一记录着三块业务分别赚取到的资金.某天,电商业 ...
- redux 初步理解
派发一个 action 给 reducer, reducer 生成了一个新的 state; redux 通过 Store 来保存数据, store.getState 获得数据, 而要更新 state, ...
- Redux 和 Redux thunk 理解
1: state 就像 model { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: fa ...
- Redux简易理解
1. createStore(相当于vuex的$store) 这才是数据存储仓库,用来存储初和输出的数据,更vuex$store功能一样 作用: 创建一个 Redux store 来以存放应用中所有 ...
- Redux 架构理解
Redux 是一种前端“架构模式”,是 Flux 架构的一种变种,用来提供可预测的状态管理.虽然经常和 React 一起被提及,但是 Redux 却不仅仅只能用于 React,还可以将其运用到其他前端 ...
- react中redux的理解
定义 redux可以看作是flux的进阶版,主要用于react中公共状态(数据)的管理 redux底层原理 redux有一个createStore方法,这个方法用户创建公共存储空间,createSto ...
随机推荐
- 【离线 撤销并查集 线段树分治】bzoj1018: [SHOI2008]堵塞的交通traffic
本题可化成更一般的问题:离线动态图询问连通性 当然可以利用它的特殊性质,采用在线线段树维护一些标记的方法 Description 有一天,由于某种穿越现象作用,你来到了传说中的小人国.小人国的布局非常 ...
- Ansible的使用和模块化深入
Ansible配置 配置文件:/etc/ansible/ansible.cfg [default] 默认配置 inventory = /etc/ansible/hosts主机清单 library = ...
- DeepFaceLab小白入门(5):训练换脸模型!
训练模型,是换脸过程中最重要的一部分,也是耗时最长的一部分.很多人会问到底需要多少时间?有人会告诉你看loss值到0.02以下就可以了.我会告诉你,不要看什么数值,看预览窗口的人脸.看第二列是否和第一 ...
- FSMC原理通俗解释
所以不用GPIO口直接驱动液晶,是因为这种方法速度太慢,而FSMC是用来外接各种存储芯片的,所以其数据通信速度是比普通GPIO口要快得多的.TFT-LCD 驱动芯片的读写时序和SRAM的差不多,所以就 ...
- nRF52-PCA10040——Overview
Overview Zephyr applications use the nrf52_pca10040 board configuration to run on the nRF52 Developm ...
- 数学基础:HUD1406-完数
完数 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem Descript ...
- BZOJ 5313: 新Fib数列
打表找规律 #include<cstdio> using namespace std; int F[20]={0,1,1,2,3,0,3,3,1,4,0,4,4,3,2,0,2,2,4,1 ...
- JAVA-基础(六) Java.io
由于IDEA相对于我这种新手来说,对学习JAVA还是比较方便,后记都移步到IDEA中进行基础学习 1.File(文件类) 尽管java.io定义的大多数类是实行流式操作的,File类不是.它直接处理文 ...
- webdriver高级应用- 测试HTML5语言实现的视频播放器
能够获取HTML5语言实现的视频播放器,视频文件的地址.时长,控制播放器进行播放或暂停播放等操作. #encoding=utf-8 import unittest from selenium impo ...
- HDU - 1705 Count the grid
昨天吉老师讲了皮克定理 皮克定理用于计算点阵中顶点在格点上的多边形面积.对于一个顶点全部在格点上的多边形来说,它的面积计算有如下特点: 如果用a表示位于多边形内部的格点数,b表示位于多边形边界上的格点 ...