博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入认识Redux(一)
阅读量:5930 次
发布时间:2019-06-19

本文共 1469 字,大约阅读时间需要 4 分钟。

注1:本文主要根据 "自述|redux中文文档" 学习的个人总结记录。也是是为了更快更好的学习和接受redux的操作,更好的应用的项目中。原文档地址:

注2:本文较长,可能会需要花一点时间去阅读和理解。

一. 简要核心

  1. 我们的应用中只会存在单一的Store.
  2. 应用中的State都是以对象树的形式在Store中.
  3. 改变每一个State的方法就是通过触发Action.
  4. 触发Action后,通过Reducer中定义的规则改变State,然后Reducer中返回一个新的State.

clipboard.png

这是网上找的一个redux的数据驱动图,可以看到视图层(view)通过触发action,根据事先定义好的某些规则(reducer)改变store(state以对象树的形式在store中)中的内容,最后store中的内容又会呈现在视图层(view)。

看下下面的代码及注释:

import {createStore} from 'redux'//1.这个counter是我们定义的一个reducer,reducer一定要返回一个state,不然会报错。//2.(state, action) => state, reducer是形如这种格式的纯函数function counter(state = 0, action) {  switch (action.type) {  case 'INCREMENT':    return state + 1;  default:    return state;  }}//创建store存储应用的状态,有以下几个方法{ subscribe, dispatch, getState }。let store = createStore(counter); //这里知道createStore是创建一个redux store存放应用的状态。// 通过subscribe订阅获取最新的数据store.subscribe(() =>  console.log(store.getState()));//1.改变内部 state 惟一方法是 dispatch 一个 action(action是一个普通对象)。//2.可以看到此时触发了action,它会对应reducer中的规则给state加1然后返回新的statestore.dispatch({ type: 'INCREMENT' });

二. reducer的三大原则

关于redux的三大原则,从简要核心中的一些关键字就可以看出来,单一、只读、纯函数。

  • 单一的数据源
    应用中的state存在一个对象树中,并且这个对象树存在唯一的Store中。
  • State只读
    只有通过action才可以触发State的改变(action是一个用于描述发生某个事件的对象),这样确保了除了触发action操作,其他任何的操作都无法改变state的内容
  • 通过Reducer改变State
    Reducer是一个纯函数,它接受之前的的state和action,并返回一个新的state,随着应用的扩大可能会有多个小的reducer,分别操作state对象树中不同的部分。最后可以通过combineReducers这个方法将每个小的reducer进行合并成一个根reducer。

总结

通过这一节应该初步了解了redux是怎么回事,是如何保存数据,改变数据的。了解redux的主要三个核心内容state,action,reducer之间联系。下面一章我们会详细介绍这三个核心概念以及数据的流动。

转载地址:http://zputx.baihongyu.com/

你可能感兴趣的文章
常用的脚本编程知识点
查看>>
坐标转换convertRect
查看>>
XILINX_zynq_详解(6)
查看>>
ubuntu安装LDAP
查看>>
计算机网络术语总结4
查看>>
新手小白 python之路 Day3 (string 常用方法)
查看>>
求职路 第二章 深圳篇
查看>>
如何限制青少年无节制的玩电脑--使用智能卡登录系统
查看>>
HTML5 Geolocation API工作原理[转载]
查看>>
soapUI的简单使用(webservice接口功能测试)
查看>>
框架 Hibernate
查看>>
python-while循环
查看>>
vs2008 x64编译环境 忽略了 #ifdef WIN32
查看>>
jquery 操纵 cookies 插件(1)
查看>>
ASP文件操作(FSO)详解
查看>>
浅析C#中new、override、virtual关键字的区别
查看>>
【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨...
查看>>
erlang学习之自定义behaviour
查看>>
java的几种对象(PO,VO,DAO,BO,POJO)解释 【转】
查看>>
转换时间为 “XX分钟之前”
查看>>