Redux源码分析之基本概念

Redux源码分析之createStore

Redux源码分析之bindActionCreators

Redux源码分析之combineReducers

Redux源码分析之compose

Redux源码分析之applyMiddleware

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源码分析之基本概念的更多相关文章

  1. Redux源码分析之createStore

    接着前面的,我们继续,打开createStore.js, 直接看最后, createStore返回的就是一个带着5个方法的对象. return { dispatch, subscribe, getSt ...

  2. Redux源码分析之applyMiddleware

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  3. Redux源码分析之bindActionCreators

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  4. Redux源码分析之combineReducers

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  5. Redux源码分析之compose

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  6. 史上最全的 Redux 源码分析

    前言 用 React + Redux 已经一段时间了,记得刚开始用Redux 的时候感觉非常绕,总搞不起里面的关系,如果大家用一段时间Redux又看了它的源码话,对你的理解会有很大的帮助.看完后,在回 ...

  7. 正式学习React(四) ----Redux源码分析

    今天看了下Redux的源码,竟然出奇的简单,好吧.简单翻译做下笔记: 喜欢的同学自己可以去github上看:点这里 createStore.js import isPlainObject from ' ...

  8. Redux源码学习笔记

    https://github.com/reduxjs/redux 版本 4.0.0 先了解一下redux是怎么用的,此处摘抄自阮一峰老师的<Redux 入门教程> // Web 应用是一个 ...

  9. redux源码图解:createStore 和 applyMiddleware

    在研究 redux-saga时,发现自己对 redux middleware 不是太了解,因此,便决定先深入解读一下 redux 源码.跟大多数人一样,发现 redux源码 真的很精简,目录结构如下: ...

随机推荐

  1. python 算法 -- 冒泡排序

    python 排序算法 -- 冒泡排序 原理 从数组的底部开始, 两两比较大小, 小的在下,大的在上, 依次类推直到顶部. 当整个数组比较完毕, 则最上面的一定是最大值(此即冒泡的由来); 当第一轮比 ...

  2. Hibernate的使用

    1 创建一个Java项目,在项目中新建一个lib,将需要的Hibernate包和MySQL包导入,并Build Path 2 在src下添加Hibernate.cfg.xml在此文件中对Hiberna ...

  3. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  4. 【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 ...

  5. 【Android Developers Training】 39. 获取文件信息

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  6. 使用Homebrew安装MySQL

    安装命令: brew install mysql 安装完成之后,启动mysql: mysql.server start 发现无此命令: command not found 首先,检查是否是安装了.重新 ...

  7. 浅入深出之Java集合框架(下)

    Java中的集合框架(下) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,哈哈这篇其实也还是基础,惊不惊喜意不意外 ̄▽ ̄ 写文真的好累,懒得写了.. ...

  8. JavaWeb 后端 <三> 之 Response Request 学习笔记

    一.响应对象 Response(重点:HTTP协议响应部分) 查看

  9. Spring3 MVC DispatcherServlet 配置问题

    1. Spring MVC 是通过servlet来进行转发的,一般在web.xml中配置如下: <servlet> <servlet-name>dispatcher</s ...

  10. java系统高并发解决方案(转载收藏)

    一个小型的网站,比如个人网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单,随着互联网业务的不断丰富,网站 ...