如何通俗易懂的理解 redux

RaoMeng 发布于2019-08-21 17:53 / 1267人阅读

摘要：的学习笔记首先先了解下什么是框架框架视图用户界面。创建数组，保存监听函数获取仓库中当前状态只有调用方法才能更新仓库合并状态执行监听函数，更新添加监听函数由于每次执行后，都会执行所以这一行的作用就是在初始化中所有的节点。

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中主要方法:

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
        }
    }

GPU云服务器云服务器 docker是什么通俗易懂云计算的通俗解释如何理解云计算如何理解深度学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90172.html

前端进阶资源整理

摘要：前端进阶进阶构建项目一配置最佳实践状态管理之痛点分析与改良开发中所谓状态浅析从时间旅行的乌托邦，看状态管理的设计误区使用更好地处理数据爱彼迎房源详情页中的性能优化从零开始，在中构建时间旅行式调试用轻松管理复杂状态如何把业务逻辑这个故事讲好和前端进阶 webpack webpack进阶构建项目(一) Webpack 4 配置最佳实践 react Redux状态管理之痛点、分析与...

BlackMass 2019-08-23 12:36 评论0 收藏0
对React-redux中connect方法的理解

摘要：应用中唯一的状态应用的子组件例子方法来看下函数到底是如何将和组件联系在一起的，注意到文档中有这样的一句话并不会改变它连接的组件，而是提供一个经过包裹的组件。关于React-redux Redux是React全家桶的重要一员，之前在知乎上也看到类似的提问：该如何通俗易懂的理解Redux? Redux是JavaScript的状态容器，Redux的概念简单明了： 1. 应用中所有的状...

Bryan 2019-08-20 18:25 评论0 收藏0
react+react-router4+redux最新版构建分享

摘要：相关配置请参考中文文档。关于的更多使用方法及理解需要详细具体讲解，涉及篇幅较大，本文暂不涉及，有兴趣可以看文档中文文档，我会整理后再单独章节分享接下来我们将编写路由组件这与有一些差别，原来的方法已经不再使用，在中或组件从中引入。相信很多刚入坑React的小伙伴们有一个同样的疑惑，由于React相关库不断的再进行版本迭代，网上很多以前的技术分享变得不再适用。比如react-...

weapon 2019-08-21 11:53 评论0 收藏0
神经网络中的梯度下降与反向传播的关系（大白话，通俗易懂版本）

摘要：损失函数的作用可以理解为当前向传播得到的预测值与真实值接近时，取较小值。神经网络神经网络就是一个万能的模型+误差修正函数，每次根据训练得到的结果与预想结果进行误差分析，进而修改权值和阈值，一步一步得到能输出和预想结果一致的模型。举一个例子：比如某厂商生产一种产品，投放到市场之后得到了消费者的反馈，根据消费者的反馈，厂商对产品进一步升级，优化，从而生产出让消费者更满意的产品。这就是...

邹立鹏 2019-07-31 11:30 评论0 收藏0
通俗易懂的Java线程池原理

摘要：前言最近发现很多小伙伴对于线程池的原理不是特别的理解，所以想通过这篇文章来让大家更好的认识线程池的原理，了解到其是如何工作的讲解下面我会将线程池比作一个公司的一个部门，介绍线程池如何工作的，同时介绍其中的一些关键组件和参数。前言最近发现很多小伙伴对于Java线程池ThreadPoolExecutor的原理不是特别的理解，所以想通过这篇文章来让大家更好的认识线程池的原理，了解到其是如...

宋华 2019-08-16 18:27 评论0 收藏0