博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Redux入门学习
阅读量:7042 次
发布时间:2019-06-28

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

一、Redux三大原则

  1. 单一数据源

  应用中所有的state都以一个对象树的形式储存在一个单一的store中。 

  2. state只读

  唯一改变state的办法是触发action。action是一个描述发生什么的对象。 

  3. 使用纯函数reducer执行修改

  为了描述action如何改变state树,你需要编写reducer。

 

二、基本概念

  1. 单一状态树

  首先需要明白 Redux 的单一状态树的概念,所谓的单一状态树,就是指“所有的 state 都以一个对象树的形式储存在一个单一的 store 中。”

  比如我们有这么一个状态树(或者你叫它状态对象也行):

{    text : 'Hello world'}

  这个状态树就只有一个节点 text,可以用来描述页面中某个文本的内容,比如说一个p标签:

Hello world

  当我们把状态树改变之后,比如:

{    text : 'Hello Stark'}

  那么p标签也要改变:

Hello Stark

  下面就是Redux最基础的概念:

  “页面中的所有状态or数据,都应该用这种状态树的形式来描述;页面上的任何变化,都应该先去改变这个状态树,然后再通过某种方式实现到页面上。”或者换句话说,我们要做的核心工作,就是用单个对象去描述页面的状态,然后通过改变这个对象来操控页面。

 

  2. Action

  Action 是一个对象。其中的type属性是必须的,表示 Action 的名称。其他属性可以自由设置。

const action = {    type: 'TEST',    text: 'Redux test'};

  Action 的任务是描述“发生了什么事情?”

  比如刚才那个例子中我们把 text 从 “Hello world” 变成了 “Hello Stark” ,那么我们应该用一个 Action 对象来描述我们的行为:

function changeText(){    return {        type: 'CHANGE_TEXT',        newText: 'Hello Stark'    }}

  这个函数会返回一个 Action 对象,这个对象里描述了“页面发生了什么”。store.dispatch接受一个 Action 对象作为参数,将它发送到reducer。

 

  3. Reducer

  Reducer 的任务是根据传入的 Action 对象去修改状态树。

  或者简单地讲 Reducer 就是一个纯函数, 根据传入的 当前state 和 action ,返回一个新的 state :

(state, action) => newState

  比如我们这个例子中的 Reducer 应该是这样的:

const initialState = {    text : 'Hello world'}function Reducer(state=initialState, action) {    switch(action.type) {        case 'CHANGE_TEXT':            return {                text : 'Hello Stark'            }        default:            return state;    }}

 

  4. Store

  Store 就是把 Reducer 和 action 联系到一起的对象。Store 有以下职责:

  1)维持应用的 state;

  2)提供 getState() 方法获取 state;
  3)提供 dispatch(action) 方法更新 state;
  4)通过 subscribe(listener) 注册监听器;

  简单地说就是你可以这样产生一个 Store :

import { createStore } from 'redux' let store = createStore(Reducer); //这里的 Reducer 就是刚才的 Reducer 函数 

  然后你可以通过 dispatch 一个 action 来让它改变状态,并通过getState来获得状态:

store.dispatch( changeText() );store.getState();                // { text : 'Hello Stark' }

  store.dispatch()是 View 发出 Action 的唯一方法。

 

  它是这样工作的:store.dispatch(action) --> reducer(state, action) --> final state

store workflow

  

转载于:https://www.cnblogs.com/lishuxue/p/6134136.html

你可能感兴趣的文章
采用aVCS实现配置自动同步
查看>>
JAVA面试算法题4
查看>>
WEB SSH之Shellinabox
查看>>
Java工作利器之常用工具类(四)——Json工具类,使用正则支持xml与json互转
查看>>
符号执行:利用Angr进行简单CTF逆向分析
查看>>
码农福音!CASIL开发代码移植系统,CTRL+C/V快速编程不再是梦想
查看>>
DevOps的四种核心能力
查看>>
【LeetCode从零单排】No22.Generate Parentheses
查看>>
云计算发展惹质疑 安全厂商竞逐“云安全”
查看>>
英特尔Michael Greene:联合Ceph社区和合作伙伴,推动存储性能优化提升
查看>>
一个土豪的智能家居梦想
查看>>
大数据如何给运营做支撑
查看>>
35 个 Java 代码性能优化总结
查看>>
理解Android安全机制
查看>>
从代码构建到性能分析,Java开发人员的首选工具
查看>>
如何防止rogue server破坏数据中心
查看>>
传网络安全提供商FireEye有意收购CyberArk
查看>>
手把手教你打造一个纯CSS图标库
查看>>
硬件辅助超融合:任意云中的全闪存VSAN
查看>>
个人隐私安全该何去何从-大量APP秘密收集追踪个人信息
查看>>