Redux

这里介绍下我对Redux的理解,不涉及如何使用Redux。

Redux 官网介绍: A predictable state container for JavaScript apps.(一个可预测的状态容器for js 应用)

可以看出最亮眼的就是可预测,是个啥呢?是个状态容器

那么首先它是个状态容器,状态容器解决了什么问题呢?

  • 解决了react中组件间通信问题,比如:好几个组件公用数据,一个组件要改变另外一个组件的数据,一个组件需要改变全局状态等这些场景。

如果你的应用比较简单,那就完全可以不用Redux,Redux 的创造者 Dan Abramov 说:只有遇到 React 实在解决不了的问题,你才需要 Redux 。

可预测指的是什么?

  • 可预测指的是,知道一个动作之后,会发生什么。因Redux,你清楚的知道什么发生了改变(action),改变之后的数据是什么样的(store/state),以及发生了哪些改变(Redux-devtool 中的 action 记录)。

是怎么做到可预测的?

  • 单一数据源,应用只能有一个store
  • 所有数据都是只读的,要想修改数据,必须 dispatch 一个 action 来描述什么发生了改变
  • 当处理 action 时,必须生成一个新的 state,不得直接修改原始对象

Redux的设计思想是?

  • Web 应用是一个状态机,视图与状态是一一对应的。
  • 所有的状态,保存在一个对象里面。

Redux之Reducer 纯函数

也就是说,只要是同样的输入,必定得到同样的输出。由于 Reducer 是纯函数,就可以保证同样的State,必定得到同样的 View,因此Reducer里不能改变state,必须返回一个全新的state对象。

纯函数是函数式编程的概念,必须遵守以下一些约束:

  • 不得改写参数

  • 不能调用系统 I/O 的API

  • 不能调用Date.now()或者Math.random()等不纯的方法,因为每次会得到不一样的结果

redux的理解的更多相关文章

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

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

  2. 对于Redux的理解

    在移动端项目,经常会在不同view中进行传递数据,事件.当事件比较少时,我们可以通过常规的事件流方法,注册,发布事件 进行响应等等.但是项目中一个事件多处响应时候,就会使程序变得相当复杂.在现在的Vu ...

  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. ACR Code Pacs

    ACR Index for Radiological Diagnosis 简称ACR Index,ACR Key或ACR Code,是一种应用于影像学分类的病理编码,由美国放射学院(American ...

  2. 基于 Mathematica 的机器人仿真环境(机械臂篇)[转]

    完美的教程,没有之一,收藏学习. 目的 本文手把手教你在 Mathematica 软件中搭建机器人的仿真环境,具体包括以下内容(所使用的版本是 Mathematica 11.1,更早的版本可能缺少某些 ...

  3. C++ Java throw goto

    throw goto - 国内版 Binghttps://cn.bing.com/search?FORM=U227DF&PC=U227&q=throw+goto C++ throw 代 ...

  4. 025批量删除mac文件名中的空格

    一. 在准备王陆语料库资料时发现给的录音文件好多带有空格,不喜欢这样的,而且不方面mac下搜索和查找,所以想把它全部删掉,命令如下: find . -name "* *"| whi ...

  5. echarjs—阿里历年双十一销售数据统计及预测

    阿里双十一数据统计 <!DOCTYPE html> <html> <head> <title>阿里历年双十一销售数据统计及预测</title> ...

  6. ubuntu中cmake版本升级

    在网上下载一个项目,编译提示版本太低 CMake Error at CMakeLists.txt: (cmake_minimum_required): CMake 编译方式安装(需要openssl) ...

  7. Pytest单元测试框架-测试用例运行规则

    1.Pytest测试用例运行规则 在pytest单元测试框架下面执行用例,需要满足以下几个特点: 1. 文件名以test_*.py开头或者*_test.py 2. 测试类.测试函数以test开头 3. ...

  8. 【tensorflow-转载】tensorflow模型部署系列

    参考 1. tensorflow模型部署系列: 完

  9. [LeetCode] 109. Convert Sorted List to Binary Search Tree 把有序链表转成二叉搜索树

    Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...

  10. Xcode使用 Organizer 分析 Crash logs

    xcode下载地址 https://developer.apple.com/download/more/