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全家桶实现一个完整应 ...
随机推荐
- 理解分布式一致性:Paxos协议之Cheap Paxos & Fast Paxos
理解分布式一致性:Paxos协议之Cheap Paxos & Fast Paxos Cheap Paxos Message flow: Cheap Multi-Paxos Fast Paxos ...
- 微服务为什么一定要用docker
引言 早在2013年的时候,docker就已经发行,然而那会还是很少人了解docker.一直到2014年,Martin Fowler提出了微服务的概念,两个不相干的技术终于走在了一起,创造了今天的辉煌 ...
- 详解Linux 安装 JDK、Tomcat 和 MySQL(图文并茂)
https://www.jb51.net/article/120984.htm
- vscode快捷替换json格式
i=json from=AUTO to=AUTO smartresult=dict client=fanyideskweb salt=1537359261311 sign=06b7d1398ebdc6 ...
- 手把手教你用Rancher创建产品质量数据库设置
目标:在本文中,我们将介绍如何运行一个分布式产品质量数据库设置,它由Rancher进行管理,并且保证持久性.为了部署有状态的分布式Cassandra数据库,我们将使用Stateful Sets (有状 ...
- ffmpeg+SDL2实现的音频播放器V2.0(无杂音)
1. 前言 目前为止,学习了并记录了ffmpeg+SDL2显示视频以及事件(event)的内容. 这篇中记录ffmpeg+SDL2播放音频,没加入事件处理. 接下来加入事件处理并继续学习音视频同步,再 ...
- muduo网络库源码学习————线程池实现
muduo库里面的线程池是固定线程池,即创建的线程池里面的线程个数是一定的,不是动态的.线程池里面一般要包含线程队列还有任务队列,外部程序将任务存放到线程池的任务队列中,线程池中的线程队列执行任务,也 ...
- JS中由闭包引发内存泄露的深思
目录 一个存在内存泄露的闭包实例 什么是内存泄露 JS的垃圾回收机制 什么是闭包 什么原因导致了内存泄露 参考 1.一个存在内存泄露的闭包实例 var theThing = null; var rep ...
- Jenkins+Ansible+Gitlab自动发布/回滚Spring项目
一.实现方法流程图 流程图如下:代码托管在本地GitLab上(为了复现整套流水线,我直接使用了GitHub,懒得再搭建GitLab),开发完成后提交代码到代码仓库,[自动]触发Jenkins进行持续集 ...
- TestNG测试用例重跑详解及实践优化
测试用例运行稳定性是自动化质量的一个重要指标,在运行中需要尽可能的剔除非bug造成的测试用例执行失败,对于失败用例进行重跑是常用策略之一.一种重跑策略是所有用例运行结束后对失败用例重跑,另一种重跑策略 ...