【原】redux学习笔记
上周学习了flux,这周研究了一下redux,其实很早之前都已经在研究他们了,只是之前一直没搞懂,最近这两周可能打通了任督二脉,都算入门了。
写博客的目的主要是做一下笔记,总结一下思路,以及和大家交流交流
在介绍redux之前,先回顾一下上周学习的flux:
flux的流程是:
view触发action中的方法;
action发送dispatch;
store接收新的数据进行合并,触发View中绑定在store上的方法; 数据的改变都是来自于store
通过修改局部state,改变局部view。
view-->action-->dispatch-->store-->view
如图所示:
这里只是大概介绍一下flux。
在介绍 redux之前,自己改版了一个官网的todomvc,让它只能增加和删除,因为感觉这样入门容易一点。
截图如下:只有新增和单个删除
代码在github上: https://github.com/xianyulaodi/reduxTodo
redux的流程是:(截取网上的一张图)
流程如下:在redux中用户的操作并不会直接导致view层的更新,而是view层发出actions
通知出发store
里的reducer
从而来更新state
;
state的改变会将更新反馈给我们的view层,从而让我们的view层发生相应的反应给用户。
redux中有三个基本概念,Action,Reducer,Store。
Action 作用。
1、用Action来分辨具体的执行动作。比如我是要添加一个项目还是删除一个项目。
2、操作数据首先得有数据。比如添加数据得有数据,删除数据得有ID。action就是存这些数据的地方。
3、不带其他数据,仅仅启示已有数据需要如何调整,或者需要主动获取哪些数据。如果我要删除掉全部数据,只要告知这件事即可
Reducer的作用:
官方描述:Action 只是描述了有事情发生了这一事实,并没有指明应用如何更新 state。这是 reducer 要做的事情。
这么说吧,Action就像一个指挥者,告诉我们应该做哪些事,比如我要删除,reducer就会给我们提供‘资源(就是上面说的数据)’,真正的体力劳动者是reducer。
也就是说,action里面的每一种描述,比如新增啦,删除一个,删除全部啦,reducer都有一个对应的函数来处理数据。之后返回给你一个新的state
reducer 只是一个模式匹配的东西,真正处理数据的函数,是额外在别的地方写的,在 reducer 中调用罢了。
Store:
前面两个,我们知道使用 action 来描述“发生了什么”,和使用 reducers 来根据 action 更新 state 的用法。
Store 就是把它们联系到一起的对象。Store 有以下职责:
- 维持应用的 state;
- 提供 getState() 方法获取 state;
- 提供 dispatch(action) 方法更新 state;
- 通过 subscribe(listener) 注册监听器
就是说,将action和reducer联系在一起的是store。
这一点要和flux的store是有区别的,flux的store是数据工厂,所有的数据操作都在store那里执行,而且flux的store可以有多个。
redux中,数据工厂在reducer这里,而不是在store这里。store有且只有一个,切记!!!!
如果你前面学习了flux,再学习redux其实是有一点小困惑的。通过Reducer修改数据给我们带来了哪些好处?
主要有两点:
1、数据拆解
2、数据不可变(immutabilit
下面想通过我的那个todomvc分析一下redux的各类结构:
Action:
action/index.js
Actions 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。用法是通过 store.dispatch() 把 action 传到 store。
redux约定 Action 内使用一个字符串类型的 type
字段来表示将要执行的动作。
上面的代码表明,我要创建两个动作,一个新增内容,要给我传回新增的内容,一个是删除文本,给我传回一个id过来
reducer
reducers/todo.js
因为对cs6语法不是很熟,所以自己做了一下备注:
因为action只是传回来一个信号,并没有说要怎么更新,所以怎么个更新发就交给了reducer,比如如果action传过来的是ADD_TODO,那么我就将这个文本加进去,并且给它一个最大的id来确定其唯一性。
真正开发项目的时候State会涉及很多功能,在一个Reducer处理所有逻辑会非常混乱,
所以需要拆分成多个小Reducer,每个Reducer只处理它管理的那部分State数据。然后在由一个主rootReducers来专门管理这些小Reducer。
Redux提供了一个方法 combineReducers 专门来管理这些小Reducer。
将多个reducers变为1个,比如我有 todos1,todos2,那么就这样写 const rootReducer = combineReducers({todos1,todos2});
reducers/index.js
主要是将多个reducer整合为一个
store
store/configureStore.js
上面章节中,我们使用 action 来描述“发生了什么”,和使用 reducers 来根据 action 更新 state 的用法。
Store 就是把它们联系到一起的对象。我们这里的作用是,创建了一个Store。createStore 有两个参数,Reducer 和 initialState。 将reducer的数据更新拿过来,然后如果没有更新的话就传一个默认值。
如果有跟新,我们就 replace掉。基本上,所有的数据都在这里了。
稍微再介绍一下Store ,它有以下职责:
维持应用的 state;
提供 getState() 方法获取 state;
提供 dispatch(action) 方法更新 state;
通过 subscribe(listener) 注册监听器。
Store提供了一些方法。让我们很方便的操作数据。
我们不用关心Reducer和Action是怎么关联在一起的,Store已经帮我们做了这些事。。
store有四个方法。
getState: 获取应用当前State。
subscribe:添加一个变化监听器。
dispatch:分发 action。修改State。
replaceReducer:替换 store 当前用来处理 state 的 reducer。
常用的是dispatch,这是修改State的唯一途径,使用起来也非常简单,他看起来是这样的~ store.dispatch(ADD_TODO),虽然我们这里没有这样写,比如你的view需要有些地方更新数据,就可以这样来拿数据。
react-redux
这是另一个概念,Redux 是独立的,它与React没有任何关系。React-Redux是官方提供的一个库,用来结合redux和react的模块。
React-Redux提供了两个接口Provider、connect。
Provider 是一个React组件,它的作用是保存store给子组件中的connect使用。
connect 会把State和dispatch转换成props传递给子组件。它看起来是下面这样的:
有点绕,什么意思呢,我的理解是,因为所有的数据都集中在了 store中,Provider从那里把store的数据拿了过来。给它的好朋友 connect,
connect是联系,连接的意思嘛,所以它将好朋友provider的数据拿了过来,让它供那些子组件使用。
./index.js
这里就是,provider从store那里拿来了数据,给connect,让它把这些数据传给组件。connect怎么没看到呢,继续往下看
containers/app.js
app.js这个组件相当于是所有其他组件的父组件,最后一行我们可以看到connect, 将provider从store那里拿来的数据注入给了APP这个组件。
connect 会把State和dispatch转换成props传递给子组件。它看起来是下面这样的:
它会让我们传递一些参数:mapStateToProps,mapDispatchToProps,mergeProps(可不填)和React组件。
之后这个方法会进行一系列的黑魔法,把state,dispatch转换成props传到React组件上,返回给我们使用。
mapStateToProps:
mapStateToProps 是一个普通的函数。 当它被connect调用的时候会为它传递一个参数State。 字面意思是,匹配一个state给组件。
mapStateToProps 需要负责的事情就是 返回需要传递给子组件的State,返回需要传递给子组件的State, 返回需要传递给子组件的State,(重要的事情说三遍。。。。)
然后connect会拿到返回的数据写入到react组件中,然后组件中就可以通过props读取数据啦~~~~
mapDispatchToProps:
字面意思:匹配dispatch给组件。
与mapStateToProps很像,接收store中的dispatch和props,使页面可以复写dispatch方法。我的理解,就是通过mapDispatchToProps这个方法,把actionCreator变成方法赋值到props,每当调用这个方法,就会更新State。有点小头晕。
慢慢理解吧,确实概念比较多。很容易晕
通过上面的整合,App这个父组件拿到了所有的数据todos,和所有的动作 actions,然后它就可以将这些数据派发给它的所有子组件了。子组件需要什么数据,和操作,来这里来拿即可
最后再粘贴上组件的代码
components/Header.js
components/TodoTextInput.js
components/TodoItem.js 也就是那个删除按钮
components/MainSection.js 也就是列表项
redux算是简单的入门了,接下来就思考怎么跟项目好好的结合。由于是初学,有误之处,希望多多包涵,欢迎指出。
react生态系统的学习前路漫漫,react 、 react-router 、 es6 、 redux 、 webpack 、react-native 。 目前不是很懂的是redux和es6和 react-native. 共勉之。 接下来学习一下es6语法,和实战结合 redux
【原】redux学习笔记的更多相关文章
- React+Redux学习笔记:React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- React Redux学习笔记
React Router React Router 使用教程 Redux中间件middleware [译]深入浅出Redux中间件 Redux学习之一:何为middleware? ES6 ES6新特性 ...
- redux学习笔记
中文api:http://cn.redux.js.org/docs/react-redux/troubleshooting.html 3.6 Reducer Store 收到 Action 以后,必须 ...
- Redux学习笔记:Redux简易开发步骤
该文章不介绍Redux基础,也不解释各种乱乱的概念,网上一搜一大堆.只讲使用Redux开发一个功能的步骤,希望可以类我的小白们,拜托它众多概念的毒害,大牛请绕道! 本文实例源代码参考:React-Re ...
- Redux 学习笔记
1:首先安装redux: npm install --save redux 2:引入redux : import { createStore } from 'redux'; //首先创建执行函数,Re ...
- Redux学习笔记--异步Action和Middleware
异步Action 之前介绍的都是同步操作,Redux通过分发action处理state,所有的数据流都是同步的,如果需要一步的话怎么办? 最简单的方式就是使用同步的方式来异步,将原来同步时一个acti ...
- Redux学习笔记-基础知识
Redux概述 是什么:Redux是管理状态的容器,提供可预测的状态管理. 怎么做:Redux主要是用来管理组件或者应用的状态,本质上跟一个事件处理器差不多.通过分发action触发reduce来 ...
- Redux学习笔记-----基础部分
Redux的基本原则 唯一数据源(应用的状态数据应该只存储在唯一的一个store上): 保持状态只读(不能直接修改Store的状态,而是应该通过派发一个action对象来完成) 数据改变只能通过纯函数 ...
- 网页前端状态管理库Redux学习笔记(一)
最近在博客园上看到关于redux的博文,于是去了解了一下. 这个Js库的思路还是很好的,禁止随意修改状态,只能通过触发事件来修改.中文文档在这里. 前面都很顺利,但是看到异步章节,感觉关于异步说得很乱 ...
随机推荐
- 东大OJ 2SAT 异或
看了十年才懂懂了十年才会会了十年才会写写了十年才写完写完了十年才能改对 #include<stdio.h> #include<string.h> struct res{ int ...
- 【心得】在脱离TFS的情况下,如何解除TFS绑定?
我们知道在有TFS的情况下,在文件-源代码管理-高级中可以解除TFS绑定. 但是如果我们出差去了,拿着笔记本电脑,打开解决方案的时候,会总是提示无法连接TFS,并且在源代码管理处尝试解除的时候也提示无 ...
- android listview 的监听事件
今天遇到了一个比较让我头疼的问题,不过追根揭底只是我对listview理解的不够透彻罢了, 闲言少叙,说说我遇到的问题吧: 上篇随笔我写了关于listview的使用,如果你也已经写好了列表那么恭喜这一 ...
- Linux 下以其他用户身份运行程序—— su、sudo、runuser
本文综合分析了Linux系统下,如何使用runuser命令.su命令和sudo命令以其他用户身份来运行程序,以及这三个命令的运行效率比较. 一.su 命令临时切换用户身份 SU:( Switch ...
- 开发错误记录5-Failed to sync Gradle project ‘HideTitleDemo’
今天用Android Studio2.0创建的项目,到Android Studio1.5打开,直接报错: 意思就是内存空间不够,要在gradle.properties 文件中进行内存设置,因为是从高版 ...
- Ubuntu14.04安装MySql
我们要确保Ubuntu14.04的服务器是可以上网的,这里我就不操作,这个比较简单.由于我的服务器是用Cobbler部署的,所以要更改源. # vi /etc/apt/source.list 我这 ...
- 网络流 poj 2135
n个点 m条边 给m条边 求1->n n->1 最小花费,每条边最多走一次 两个最短路显然不行 会影响另外一条 #include<stdio.h> #include<al ...
- Oracle查询所有序列
--查看当前用户的所有序列 select SEQUENCE_OWNER,SEQUENCE_NAME from dba_sequences where sequence_owner='用户名'; --查 ...
- Elasticsearch 1.X 版本Java插件开发
接上一篇<Elasticsearch 2.X 版本Java插件开发简述> 开发1.X版本elasticsearch java插件与2.X版本有一些不同,同时在安装部署上也有些不同,主要区别 ...
- 【深入Java虚拟机】之一:Java内存模型与内存溢出
[深入Java虚拟机]之:Java内存区域与内存溢出 高速缓存模型如下: ----------------------------------------------------分割线-------- ...