在移动端项目,经常会在不同view中进行传递数据,事件。当事件比较少时,我们可以通过常规的事件流方法,注册,发布事件 进行响应等等。但是项目中一个事件多处响应时候,就会使程序变得相当复杂。在现在的Vue以及React框架中给了不错的解决方案:就是Vue中的Vuex以及React中Redux 这种应用程序状态管理工具。简单理解就是统一管理和维护组件中的可变化状态,今天主要说下 React中的Redux。

  1. React有props和state: props意味着父级分发下来的属性,state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,也就是说数据只能单向向下分发,或者自行内部消化。
理解这个是理解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的理解的更多相关文章

  1. redux的理解

    Redux 这里介绍下我对Redux的理解,不涉及如何使用Redux. Redux 官网介绍: A predictable state container for JavaScript apps.(一 ...

  2. redux深入理解之中间件(middleware)

    理解reduce函数 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. arr.reduce([callback, initi ...

  3. fish redux 个人理解

    fish redux 理解 fish redux是什么 Fish Redux 是一个基于 Redux 数据管理的组装式 flutter 应用框架, 它特别适用于构建中大型的复杂应用. 它的特点是配置式 ...

  4. 对redux的理解

     redux原理 某公司有物流(actionType).电商(actionType).广告(actionType)3块业务,在公司财务系统(state)统一记录着三块业务分别赚取到的资金.某天,电商业 ...

  5. redux 初步理解

    派发一个 action 给 reducer, reducer 生成了一个新的 state; redux 通过 Store 来保存数据, store.getState 获得数据, 而要更新 state, ...

  6. Redux 和 Redux thunk 理解

    1: state 就像 model { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: fa ...

  7. Redux简易理解

    1. createStore(相当于vuex的$store) 这才是数据存储仓库,用来存储初和输出的数据,更vuex$store功能一样 作用:  创建一个 Redux store 来以存放应用中所有 ...

  8. Redux 架构理解

    Redux 是一种前端“架构模式”,是 Flux 架构的一种变种,用来提供可预测的状态管理.虽然经常和 React 一起被提及,但是 Redux 却不仅仅只能用于 React,还可以将其运用到其他前端 ...

  9. react中redux的理解

    定义 redux可以看作是flux的进阶版,主要用于react中公共状态(数据)的管理 redux底层原理 redux有一个createStore方法,这个方法用户创建公共存储空间,createSto ...

随机推荐

  1. C/C++ 数组与指针

    #include <iostream>using namespace std;int main(){ char *a[]={"ab","ccs",& ...

  2. Form和ModelForm组件

    Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...

  3. poj 3050 地图5位数问题 dfs算法

    题意:一个5*5地图上面,从任意位置上下左右跳五次,组成一个数.问:不重复的数有多少个? 思路:dfs 从任意位置跳5次,说明每个位置都需要遍历. 组成一个数:number*10+map[dx][dy ...

  4. MySQL配置允许远程登录

    MySQL默认只允许用户本地登录,需要远程连接可进行如下操作: 允许root用户在任何地方进行远程登录,并具有所有库任何操作权限: 使用root用户登录mysql: mysql -u root -p& ...

  5. Android兼容性测试CTS Verifier-环境搭建、测试执行、结果分析

    CTS Verifier算是CTS的一部分,需要手动进行,主要用于测试那些自动测试系统无法测试的功能,比如相机.传感器等.由于硬件配置或其他原因,不同手机上部分测试项目被隐藏,也就是说CTS Veri ...

  6. Report Server multiple value 多值选择

    一.项目需求 今天在做项目的时候,有一个需求,具体如下:在Report Server中存在一个报表,报表中有一个参数doctor_name,该参数允许多值,默认全部.但是由于前端页面医生选择时多选没有 ...

  7. PHP GD库---之商详合成分享图片

    $item_pic = 'img/item.jpg'; $qcode_pic = 'img/qcode.png'; $user_pic = 'img/user.jpeg'; $item_title = ...

  8. webservice soap wsdl简介

    先给出一个概念 SOA ,即Service Oriented Architecture ,中文一般理解为面向服务的架构, 既然说是一种架构的话,所以一般认为 SOA 是包含了运行环境,编程模型, 架构 ...

  9. configurationChanges

    在Android中每次屏幕的切换动会重启Activity,所以应该在Activity销毁前保存当前活动的状态,在Activity再次Create的时候载入配置.在activity加上android:c ...

  10. [转] immutability-helper 插件的基本使用(附源码)

    概念 先理解一下 Immutable 的概念,Immutable数据就是一旦创建,就不能更改的数据.每当对Immutable对象进行修改的时候,就会返回一个新的Immutable对象,以此来保证数据的 ...