Redux源码分析之基本概念
redux版本 3.7.2 (注: 分析的是redux,不是react-redux, 我这里是直接引入浏览器里,所以出现的 self.Redux,不要惊奇)
借用一张图,先了解下redux的几个概念
action: 一个操作的定义,大概是这个样子, 本身是一个对象
{
type:'add',
todo
}
actionCreater: 一个函数,返回结果是一个action
function add (todo) {
return {
type: 'add',
todo
}
}
reducer: 真正更新数据操作的函数,大概是这么个样子
// reducer
let todoReducer = function (state = todoList, action) {
switch (action.type) {
case 'add':
return [...state, action.todo]
case 'delete':
return state.filter(todo => todo.id !== action.id)
default:
return state
}
}
store: 只有一个。把action,state,reducer连接起来的对象。有如下方法
- dispatch:触发一个action
- subscribe : 订阅store
- getState :获得当前的state
- replaceReducer :更换reducer
- observable :暂无研究(尴尬)
我们先来一个简单的示例,直接dispatch action模式。这里大家应该都懂,不然。。。。。。
/* 简单示例 */
let { createStore } = self.Redux //默认state
let todoList = []
// reducer
let todoReducer = function (state = todoList, action) {
switch (action.type) {
case 'add':
return [...state, action.todo]
case 'delete':
return state.filter(todo => todo.id !== action.id)
default:
return state
}
} //创建store
let store = createStore(todoReducer) //订阅
function subscribe1Fn() {
console.log(store.getState())
}
let sub = store.subscribe(subscribe1Fn) store.dispatch({
type: 'add',
todo: {
id: 1,
content: '学习redux'
}
}) store.dispatch({
type: 'add',
todo: {
id: 2,
content: '吃饭睡觉'
}
}) store.dispatch({
type: 'delete',
id: 2
}) // 取消订阅
sub() console.log('取消订阅后:')
store.dispatch({
type: 'add',
todo: {
id: 3,
content: '打游戏'
}
})
输出如下:
createStore传入reducer生成store,store就可以订阅,和派发事件了,还是比较简单的。
- subscribe 是可以取消的,subscribe返回的是一个函数,执行该函数就会取消订阅。
下一篇,我们来一起分析 createStore方法。
Redux源码分析之基本概念的更多相关文章
- Redux源码分析之createStore
接着前面的,我们继续,打开createStore.js, 直接看最后, createStore返回的就是一个带着5个方法的对象. return { dispatch, subscribe, getSt ...
- Redux源码分析之applyMiddleware
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- Redux源码分析之bindActionCreators
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- Redux源码分析之combineReducers
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- Redux源码分析之compose
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- 史上最全的 Redux 源码分析
前言 用 React + Redux 已经一段时间了,记得刚开始用Redux 的时候感觉非常绕,总搞不起里面的关系,如果大家用一段时间Redux又看了它的源码话,对你的理解会有很大的帮助.看完后,在回 ...
- 正式学习React(四) ----Redux源码分析
今天看了下Redux的源码,竟然出奇的简单,好吧.简单翻译做下笔记: 喜欢的同学自己可以去github上看:点这里 createStore.js import isPlainObject from ' ...
- Redux源码学习笔记
https://github.com/reduxjs/redux 版本 4.0.0 先了解一下redux是怎么用的,此处摘抄自阮一峰老师的<Redux 入门教程> // Web 应用是一个 ...
- redux源码图解:createStore 和 applyMiddleware
在研究 redux-saga时,发现自己对 redux middleware 不是太了解,因此,便决定先深入解读一下 redux 源码.跟大多数人一样,发现 redux源码 真的很精简,目录结构如下: ...
随机推荐
- python 算法 -- 冒泡排序
python 排序算法 -- 冒泡排序 原理 从数组的底部开始, 两两比较大小, 小的在下,大的在上, 依次类推直到顶部. 当整个数组比较完毕, 则最上面的一定是最大值(此即冒泡的由来); 当第一轮比 ...
- Hibernate的使用
1 创建一个Java项目,在项目中新建一个lib,将需要的Hibernate包和MySQL包导入,并Build Path 2 在src下添加Hibernate.cfg.xml在此文件中对Hiberna ...
- JavaScript 创建一个 form 表单并提交
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 【LeetCode】141. Linked List Cycle
题目: Given a linked list, determine if it has a cycle in it. Follow up:Can you solve it without using ...
- 【Android Developers Training】 39. 获取文件信息
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 使用Homebrew安装MySQL
安装命令: brew install mysql 安装完成之后,启动mysql: mysql.server start 发现无此命令: command not found 首先,检查是否是安装了.重新 ...
- 浅入深出之Java集合框架(下)
Java中的集合框架(下) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,哈哈这篇其实也还是基础,惊不惊喜意不意外 ̄▽ ̄ 写文真的好累,懒得写了.. ...
- JavaWeb 后端 <三> 之 Response Request 学习笔记
一.响应对象 Response(重点:HTTP协议响应部分) 查看
- Spring3 MVC DispatcherServlet 配置问题
1. Spring MVC 是通过servlet来进行转发的,一般在web.xml中配置如下: <servlet> <servlet-name>dispatcher</s ...
- java系统高并发解决方案(转载收藏)
一个小型的网站,比如个人网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单,随着互联网业务的不断丰富,网站 ...