如何通俗易懂的理解 redux

分布式事务
• 阅读 1644

redux的学习笔记

首先先了解下什么是MVC框架
MVC框架(Model-View-Controller)
  • 视图(View):用户界面。 => 传送指令到 Controller
  • 控制器(Controller):业务逻辑 => 完成业务逻辑后,要求 Model 改变状态
  • 模型(Model):数据保存 => 将新的数据发送到 View,用户得到反馈
来个小故事帮助理解

故事的主人公小明,辛苦打拼多年,终于存到了买房的钱,于是就屁颠屁颠的在首都的郊区买了一套120的毛坯房(当前的房子的state),因为是毛坯房,自然是出了一些基础设施其他啥也没有(initState),这问题就来了,这毛坯房也不能住啊 ,这刚买完房也没多少积蓄了,就想着找装修公司简装下,问了价格之后,小明直接就凭着当年在幼儿园打下的美术基础画了一张设计图,然后就和自己老婆分配了任务,谁该做什么,例如小明粉刷墙,经过多天努力,总算是装修完成了,此时小明的新房,从一个毛坯房,变成了一个豪华的毛坯房(更新之后的房子的state

1.首先回顾下这个故事: 小名的毛坯房 --> 画出装修图纸 --> 小明分配任务 --> 小明和自己老婆装修 --> 豪华毛坯房
2.再来说下Redux里的几个核心概念,这里我们把React也加进来:

  • view(React)
  • store(state)
  • action
  • reducer

3.接下来看看Redux/React与这个故事的联系:

  • view(React) = 第一次看到毛坯房
  • store(state) = 毛坯房空空如也,什么都没有,只有基础设施
  • action = 小明分配任务(谁应该干什么)
  • reducer = 具体任务都干些什么(小明粉刷墙)

4.所以这个过程应该是这样的
view ---> action ---> reducer ---> store(state) ---> view

5.如果放入一个web app中,首先store(state)决定了view,然后用户与view的交互会产生action,这些action会触发reducer因而改变state,然后state的改变又造成了view的变化。
如何通俗易懂的理解 redux

redux 源码简单分析

redux中主要方法:

  • createStore
  • combineReducers
  • bindActionCreators
  • applyMiddleWare
  • compose
这里主要分析一下createStore(reducer)

原函数有三个参数,这里只分析第一个参数reducer
参数:reducer

  • reducer: function类型(而且是纯函数),reducer的作用是,根据指定的action的type,进行处理state,返回新的state
  • 参数:

    • action: 是一个对象或者函数(最终返回的也是对象),type是action必须有的属性,reducer根据action.type处理state
    • state: 需要在这里初始化state,不然会报错
  • 因为reducer合并状态是覆盖式,所以需要先解构出当前状态,再进行处理
store的返回值:返回值是三个方法
  • dispatch: 分发action,只能用dispatch修改store中的状态

    • 根据action查询reducer中变state的方法,更新store tree
    • 变更store tree后,依次执行listener中所有响应函数
  • getState: 获取仓库中当前状态
  • subscribe: 注册监听函数,监听state的变化
  • store 可以理解为一个全局变量,保存着你项目中所有需要保存的数据,而这个全局变量加了一把密码锁,只有指定的密码(dispatch({type:AAA}))进行修改,因为你想啊,若是谁都能修改这个全局变量,而在你用这个变量之前,可能执行的其他程序已经对这个变量进行了修改,这也是我们平时开发的时候避免全局变量的原因,所以就要提高修该数据的权限。
    let createStore = (reducer)=>{
        var state;
        let listeners = []; 
         //创建数组,保存监听函数
    
        let getState = ()=>state;
       // 获取仓库中当前状态
       
        function dispatch(action){
            // 只有调用dispatch方法才能更新仓库
            state = reducer(state,action);
            // 合并状态
            listeners.forEach(listener=>listener());
            //执行监听函数,更新view
        }
        
        let subscribe = (listener)=>{
        listeners.push(listener);
        // 添加监听函数
        }
        dispatch({})
        // 由于每次dispatch执行后,redux都会执行reducer
        //所以这一行的作用就是在初始化store tree中所有的state节点。
        return {
            getState,
            dispatch,
            subscribe
        }
    }
点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
3年前
Activiti 工作流入门指南
<divclass"htmledit\_views"id"content\_views"<h1<aname"t0"</a概览</h1<p如我们的介绍部分所述,Activiti目前分为两大类:</p<ul<li<p<ahref"https://activiti.gitbook.io/activiti7deve
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这