redux学习与使用
Redux:
主要概念Action,reducer,store,state
原理:dispatch ({ type:action, preload: { val } } ) --->reducer(修改state)
store:
Store 就是把它们(state,action,reducer)联系到一起的对象
维持应用的 state;
提供
getState()
方法获取 state;提供
dispatch(action)
方法更新 state;通过
subscribe(listener)
注册监听器;通过
subscribe(listener)
返回的函数注销监听器。再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时,你应该使用 reducer 组合而不是创建多个 store。
state:
在 Redux 应用中,所有的 state 都被保存在一个单一对象中
action:
通过action修改state,action就是一个普通js对象,给出一个action实例:
{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
type
字段来表示将要执行的动作, text
字段是传递的值
强制使用 action 来描述所有变化带来的好处是可以清晰地知道应用中到底发生了什么,
为了把 action 和 state 串起来,开发一些函数,这就是 reducer
reducer 只是一个接收 state 和 action,并返回新的 state 的函数
reducer:
不修改原来的state, 使用
Object.assign({}, obj1, obj2)
新建了一个副本,或者es6对象展开运算符的使用,{...state, ...newState}达到相同目的在 default 情况下返回旧的 state。遇到未知的 action 时,一定要返回旧的
state
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
})
default:
return state
}
} 学习书:
http://caibaojian.com/react/component-lifecycle.html
http://huziketang.mangojuice.top/books/react/lesson2
redux学习与使用的更多相关文章
- redux学习
redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...
- React Redux学习笔记
React Router React Router 使用教程 Redux中间件middleware [译]深入浅出Redux中间件 Redux学习之一:何为middleware? ES6 ES6新特性 ...
- React+Redux学习笔记:React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- redux学习总结
redux学习总结 *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !imp ...
- Redux学习及应用
Redux学习及应用 一:Redux的来源? Redux 是 JavaScript 状态容器,提供可预测化的状态管理.Redux是由 Flux 演变而来,但受 Elm 的启发,避开了 Flux 的复杂 ...
- 【原】redux学习笔记
上周学习了flux,这周研究了一下redux,其实很早之前都已经在研究他们了,只是之前一直没搞懂,最近这两周可能打通了任督二脉,都算入门了. 写博客的目的主要是做一下笔记,总结一下思路,以及和大家交流 ...
- react与redux学习资料的整理
**重点内容**React学习 1.新手入门可以访问react的官方网站,如果英语不是特别好的同学可以访问中文版的,具体链接http://reactjs.cn/react/index.html 首页有 ...
- Redux 学习(1) ----- Redux介绍
Redux 有三个基本的原则: 1,单一状态树,redux 只使用一个javascript 对象来保存整个应用的状态. 状态树样式如下: const state = { count: 0 } 2,状态 ...
- Redux学习之解读applyMiddleware源码深入middleware工作机制
随笔前言 在上一周的学习中,我们熟悉了如何通过redux去管理数据,而在这一节中,我们将一起深入到redux的知识中学习. 首先谈一谈为什么要用到middleware 我们知道在一个简单的数据流场景中 ...
- Redux学习day1
01.React介绍 Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具.随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多 ...
随机推荐
- IE6中CSS常见BUG全集及解决方案——摘自网友
IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...
- tensorflow安装相关问题
安装步骤 要求:Python必须是64位根据TensorFlow的计算方式,TensorFlow的安装分为CPU版本和GPU版本对于Python3.5或者Python3.6,可以使用pip insta ...
- sql语句:查询、排序、不区分大小写查询,及联合使用
1.不排序时的查找语句: offset message 为表名,talker 为列名. 此语句的意思是:从message 表中查找 talker 等于wxid_0930479303212的数据,从第 ...
- log4j 将日志文件输出到web-inf下的解决办法
参考链接:http://blog.csdn.net/chenfengdejuanlian/article/details/70738995 只需要配置好即可,用的时候直接在代码中获得记录器记录,监听器 ...
- Linux内核分析-使用gdb跟踪调试内核从start_kernel到init进程启动
姓名:江军 ID:fuchen1994 实验日期:2016.3.13 实验指导 使用实验楼的虚拟机打开shell cd LinuxKernel/ qemu -kernel linux-3.18.6/a ...
- mysql server查询客户端连接数
SELECT substring_index(HOST, ) AS host_name, state, count(*) FROM information_schema. PROCESSLIST GR ...
- python笔记04:字典
4.1 字典的使用 字典:通过名字来引用值的数据结构,又称为映射 字典中的值并没有特殊的顺序,但是都存储在一个特定的键下 字典提供的功能:快速查找特定键值对应关系 某些情况下,字典比列表更好用一些 ...
- 互评Beta版本
作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2448] 基于NABCD评论作品,及改进建议 1.杨老师粉丝群.作品:<P ...
- Effective C++阅读笔记
条款1:视C++为一个语言联邦:C.Object-Oriented C++.Template C++.STLC++高效编程守则视情况而变化,取决于使用C++的哪一个部分 条款2:尽量以const,en ...
- php变量和字符串连接符——点
连接符——点,本身也是一种运算符.它真正的名字应该叫“字符运算符”.作用是把两个字符串连接起来. echo 字符 . 变量 . 字符; //点号把三个值连接成为一个,运行正常. 例: 1.字符串+变 ...