初学redux，前前后后看了两三遍，可能是自己太心急了，官方文档很简单的逻辑一直搞不明白，现在静下心来，一行一行慢慢看，总算摸到一点门路，先记录一下防止再忘记了。

刚开始看redux，有三个关键词是要懂得——action、reducer、store。

Action

个人认为action就是一个数据模板，如果想要传入一个参数，需要套上这层模板才可以。

redux是什么，是js的状态管理，既然想让人家来管理数据，就得按人家的规矩来。

定义一个action就是定义一个对象，只不过，定义的这个对象中，必须使用一个字符串类型的type字段来表示将要执行的动作，因为所有action都是用的这个模板，所以为了区分，就得给每一个action定义一个“名字”，知道这个action是要干什么的。

例如：

{type: 'ADD_TODO'，text: 'Build my first Redux app'
}

这就定义了一个action，一般来说，做一个小的应用系统，这样就ok了，但是随着应用规模的扩大，需要将type的值显示的定义成常量，如果能使用单独的模块来存放action就更好了。

例如：

// 同文件中定义常量
const ADD_TODO = 'ADD_TODO'// 或者使用单独模块来存放action
import { ADD_TODO, REMOVE_TODO } from '../actionTypes'{type: ADD_TODO,text: 'Build my first Redux app'
}

Action创建函数

action创建函数就是生成action的方法，在recux中action创建函数只是简单的返回一个action。

例如：

function addTodo(text) {return {type: ADD_TODO,text}
}

这样做能使action创建函数更容易被移植和测试。之后如果想用这个action，直接调用addTodo函数就可以了。当然一个文件里可以有多个action，多个action创建函数，将这一块内容统称为actions。

想必到这里，应该初步了解了action是什么了吧。记住，actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。下面接着看第二个关键词，这个关键字将会告诉我们如何来改变一个状态，也就是如何来改变一个数据。

Reducer

reducer 就是一个纯函数，接收旧的 state和 action，返回新的 state。举个例子，这句话的意思就是相当于你去换手机屏，你自己带着新屏，你需要把手机和新屏都给维修人员，人家将换好手机屏的手机再还给你。

我们需要修改数组中指定的数据项而又不希望导致突变, 因此我们的做法是在创建一个新的数组后, 将那些无需修改的项原封不动移入, 接着对需修改的项用新生成的对象替换。

和action一样，可以同时处理多个action，将这一块内容统称为reducers。

具体函数方法示例，可以参考文末官方文档链接，讲的特别详细。

上面两个关键字讲解完了，但是如何能使它们相互建立联系，就需要最后一个关键词。

Store

我们知道了 action 是来描述“发生了什么”， reducers 是根据 action 来更新 state 的。那么Store 就是把它们联系到一起的对象。

它给我们提供了下面几个方法：

提供 getState() 方法获取 state；
提供 dispatch(action) 方法更新 state；
通过 subscribe(listener) 注册监听器;
通过 subscribe(listener) 返回的函数注销监听器。

方法示例：

1、创建一个store

import todoApp from './reducers'
let store = createStore(todoApp)

2、打印初始状态

// 打印初始状态
console.log(store.getState())

3、注册监听器

// 每次 state 更新时，打印日志
// 注意 subscribe() 返回一个函数用来注销监听器
const unsubscribe = store.subscribe(() =>console.log(store.getState())
)

4、对数据进行一系列更新

// 发起一系列 action
store.dispatch(addTodo('Learn about actions'))
store.dispatch(addTodo('Learn about reducers'))
store.dispatch(addTodo('Learn about store'))
store.dispatch(toggleTodo(0))
store.dispatch(toggleTodo(1))
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))

5、注销监听器

// 停止监听 state 更新
unsubscribe();

通过监听器，我们能看到 store 里的 state 是如何变化的。

到这里，已经初步搞懂redux这三个基本关键词是什么意思了，本人也是初学redux，有哪里不对，还望指正。

参考链接：https://www.redux.org.cn/docs/basics/Actions.html

redux入门基础一相关推荐

Flutter fish redux入门
fish redux 本分主要介绍闲鱼出品的fish redux基础知识和使用,后续会有复杂应用场景分享. flutter自带demo void main() => runApp(MyApp() ...
Python培训入门基础知识学什么?
Python培训基础知识主要是针对一些零基础的同学安排的,虽说Python是相对比较简单的一门编程语言,但是没有基础的同学还是要进行系统的学习,那么Python培训入门基础知识学什么呢?来看看下面小编 ...
JSON入门基础知识
2019独角兽企业重金招聘Python工程师标准>>> JSON入门基础 1.JSON定义 JSON:JavaScript 对象表示法(JavaScript Object Notat ...
JSP WEB开发入门基础到高手进阶教程002
JSP WEB开发入门基础到高手进阶教程 -------开发入门 JSP与微软的Active Server Pages 兼容,但它是使用类似HTML的卷标以及Java程序代码段而不是VBScript. ...
NLP汉语自然语言处理入门基础知识介绍
NLP汉语自然语言处理入门基础知识介绍自然语言处理定义: 自然语言处理是一门计算机科学.人工智能以及语言学的交叉学科.虽然语言只是人工智能的一部分(人工智能还包括计算机视觉等),但它是非常独特的一部 ...
负荷计算的时候assert失败_负荷计算的入门基础知识，小白入门必备！
负荷计算是电气设计人员必须掌握的一必修课,选导体.设备还有保护开关的选择,电网系统分析,都离不开负荷计算的内容,为此小编特意总结9个负荷计算的入门基础知识,分享给大家,希望能在工作和学习中作为一份参考 ...
7.1 pdo 宝塔面板php_小白入门基础傻瓜式操作PHP面板安装使用_Bt宝塔面板
小白入门基础傻瓜式操作PHP面板安装使用--Bt宝塔面板从购买服务器到安装面板在到搭建网站(最基础的教程,以后会延伸到部署项目) 不用写代码谁都可以做到搭建自己的网站(PHP类)还有小程序,只要 ...
redux 入门到实践
前言之前没太理解redux,在使用时总是照葫芦画瓢,看项目里别人如何使用,自己就如何使用,这一次彻底学习了下官方文档,记录. 在学习redux初时,有三个概念需要了解. action reducer ...
python编程语法大全-Python编程入门——基础语法详解
今天小编给大家带来Python编程入门--基础语法详解. 关于怎么快速学python,可以加下小编的python学习群:611+530+101,不管你是小白还是大牛,小编我都欢迎,不定期分享干货每天 ...

redux入门基础一

Action

Action创建函数

Reducer

Store

redux入门基础一相关推荐

最新文章

热门文章