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的更多相关文章

  1. [Redux] Store Methods: getState(), dispatch(), and subscribe()

    console.clear(); const counter = (state = 0, action) => { switch (action.type) { case 'INCREMENT' ...

  2. [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 ...

  3. [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 ...

  4. [React Testing] The Redux Store - Multiple Actions

    When using Redux, we can test that our application state changes are working by testing that dispatc ...

  5. [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 ...

  6. [Redux] Implementing Store from Scratch

    Learn how to build a reasonable approximation of the Redux Store in 20 lines. No magic! const counte ...

  7. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  8. react+redux教程(六)redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

  9. 实例讲解react+react-router+redux

    前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...

随机推荐

  1. 使用docker安装codimd,搭建你自己的在线协作markdown编辑器

    目录 一.前言 二.codimd是什么? 2.1 源于hackmd的超好用markdown编辑器 2.2 codimd的作用 三.安装和使用 3.1 安装前需要知道的 3.2 安装步骤 3.2.1 创 ...

  2. 微信小程序 POST传值跳坑

    来源:https://www.cnblogs.com/ordinaryk/p/8430462.html 加这个就行了: header : { 'content-type': 'application/ ...

  3. docker的网络(5)

    当 Docker 启动时,会自动在宿主机上创建一个 docker0 虚拟网桥,实际上是Linux 的一个 bridge. Docker 随机分配一个本地未占用的私有网络(在RFC1918中定义)中的一 ...

  4. C++ Windows - How to get process path from its PID

    出处 https://stackoverflow.com/questions/1933113/c-windows-how-to-get-process-path-from-its-pid 注意质疑(我 ...

  5. OSG加载倾斜摄影数据

    目录 1. 概述 2. 实例 2.1. 代码 2.2. 解析 3. 结果 1. 概述 ContextCapture(Smart3D)生成的倾斜摄影模型数据一般都形如如下组织结构: 在Data目录下包含 ...

  6. docker-compose简介及安装

    一.简介 Compose是用于定义和运行多容器Docker应用程序的工具,是docker的服务编排工具,主要应用于构建基于Docker的复杂应用,compose通过一个配置文件来管理多个docker容 ...

  7. 【linux题目】第二关

    1.创建目录/data/oldboy,并且在该目录下创建文件oldboy.txt,然后在文件oldboy.txt里写入内容”inet addr:10.0.0.8 Bcast:10.0.0.255 Ma ...

  8. 为什么LIKELY和UNLIKELY要用两个叹号

    LIKELY和UNLIKELY的一般定义如下: #define LIKELY(x) (__builtin_expect(!!(x),1))#define UNLIKELY(x) (__builtin_ ...

  9. 数据库SQL语言从入门到精通--Part 6--单表查询(快来PICK)

    数据库从入门到精通合集(超详细,学习数据库必看) 查询操作是SQL语言中很重要的操作,我们今天就来详细的学习一下. 一.数据查询的语句格式 SELECT [ALL|DISTINCT] <目标列表 ...

  10. pytest文档38-allure.setp添加测试用例步骤

    前言 一般流程性的测试用例,写成自动化用例时,步骤较多写起来会比较长.在测试用例里面添加详细的步骤有助于更好的阅读,也方便报错后快速的定位到问题. 举个常见的测试场景用例:从登陆开始,到浏览商品添加购 ...