Redux:store
Store是一个对象。他有如下职责:
1.存放state
2.对外提供访问state的接口: getState()
3.允许state更新:dispatch(action)
4.注册监听器: subscribe(listener)
5.注销监听器,通过subscribe返回的函数
redux所在的应用只能有一个store实例,如果想将state操作分解成多个逻辑,只能将Reducer的代码分解为多个部分,以函数调用的方式提取出来处理各自的逻辑。
当我们已经有一个处理state的Reducer函数时,比如todoApp,创建store实例非常简单,只需将它传入createStore():
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)
createStore()可以接收第二个参数,作为state的初始值。文档中提到的一种情况是传入服务器返回的state作为初始state,实现定制化。
Dispatching Actions:
//action creators
import {
addTodo,
toggleTodo,
setVisibilityFilter,
VisibilityFilters
} from './actions' // Log the initial state
console.log(store.getState()) // Every time the state changes, log it
// Note that subscribe() returns a function for unregistering the listener
let unsubscribe = store.subscribe(() =>
console.log(store.getState())
) // Dispatch some actions
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)) // Stop listening to state updates
unsubscribe()
一开始我以为store是一个独立且区别于reducer的对象,现在发现,原来createStore只是对Reducer做了一层包装。
当store.dispatch()方法被调用的时候,只需要传入action,其内部会自动获取即刻的state并一起传入Reducer中。
值得一提的是,subscribe()方法默认订阅的是state发生变化这个事件,和所有基于事件机制的方法一样,传入的是一个callback。其返回值默认是一个注销subscribe()的函数。
Redux:store的更多相关文章
- [Redux] Store Methods: getState(), dispatch(), and subscribe()
console.clear(); const counter = (state = 0, action) => { switch (action.type) { case 'INCREMENT' ...
- [Functional Programming ADT] Create a Redux Store for Use with a State ADT Based Reducer
With a well defined demarcation point between Redux and our State ADT based model, hooking up to a R ...
- [Redux-Observable && Unit Testing] Use tests to verify updates to the Redux store (rxjs scheduler)
In certain situations, you care more about the final state of the redux store than you do about the ...
- [React Testing] The Redux Store - Multiple Actions
When using Redux, we can test that our application state changes are working by testing that dispatc ...
- [AngularJS] Write a simple Redux store in AngularJS app
The first things we need to do is create a reducer: /** * CONSTANT * @type {string} */ export const ...
- [Redux] Implementing Store from Scratch
Learn how to build a reasonable approximation of the Redux Store in 20 lines. No magic! const counte ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- 实例讲解react+react-router+redux
前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...
随机推荐
- git工具上传项目到码云
首先,你需要在本地安装git客户端,此处简单易懂,略过然后,在本地建好文件夹,以本人为例,我的路径为 E:\git_project,此时需要通过鼠标右键选择:git bush here 如图所示然后会 ...
- 20199326《Linux内核原理与分析》第十二周作业
Collabtive系统跨站请求伪造攻击实验 实验背景 CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/sessi ...
- Inno Setup打包之先卸载再安装
使用Inno Setup打包程序之后,如果想要在安装前先卸载,那么需要加下面代码,需要注意的是红色标注的改为你们自己的.网上看到有些说_is1前面用AppName,但是我这边验证不行. [Setup] ...
- CentOS上安装配置 mongodb
CentOS 首先yum list mongo* 查看是否有关于mongo的安装包,检查后安装即可 mongo 分client端和server端,server启动db服务,client可以连接到s ...
- 【JAVA基础】03 Java语言基础
前言:流程控制语句 什么是流程控制语句 流程控制语句:可以控制程序的执行流程. 流程控制语句的分类 顺序结构 选择结构 循环结构 执行流程: 从上往下,依次执行. 案例演示 输出几句话看效果即可 cl ...
- shell脚本(多线程批量创建用户)
shell脚本中的多线程 很多场景中会用到多线程,例如备份数据库,有100个库,正常备份效率极其低下.有了多线程原本可能需要10个小时备份,现在分10个线程同时去干,只要一个小时就解决了.今天就介绍下 ...
- 《Java 开发从入门到精通》—— 2.3 使用IDE工具序
本节书摘来异步社区<Java 开发从入门到精通>一书中的第2章,第2.3节,作者: 扶松柏 , 陈小玉,更多章节内容可以访问云栖社区"异步社区"公众号查看. 2.3 使 ...
- jmeter的教学视频
转载于:https://www.cnblogs.com/ios9/p/9769058.html
- UDT的Sender和Receiver
Sender算法 数据结构和变量: Sender's Loss List:发送方的loss list用来存储丢失包的序列号,序列号来自于两个地方,一是receiver通过NAK包反馈回来,二是超时事件 ...
- 墨仓式进入2.0时代?爱普生商用墨仓式L4158试用
提起"墨仓式"打印机,相信现在已经没有人需要过多的解释,墨仓式打印机在打印市场占有率不断提高就是最佳佐证.为什么用户对于墨仓式这么认可,想必是墨仓式真正洞悉了他们的需求,解决了打印 ...