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. 【Inno Setup】查看是否安装了VC++ 2015 Redistributeable

    可能有必要先测一下注册表的这一项是否存在 if RegValueExists(HKLM, 'SOFTWARE\WOW6432Node\Microsoft\VisualStudio\14.0\VC\Ru ...

  2. Python 如何实现 单实例

    出处:https://stackoverflow.com/questions/380870/make-sure-only-a-single-instance-of-a-program-is-runni ...

  3. IDEA设置导入主题样式皮肤,加入背景图片

    主题下载地址:http://www.riaway.com/theme.php 里面有很多主题,看个人喜好,这里我用的Monokai Sublime Text 3. 导入主题打开IDEA,找到File ...

  4. fail-safe fail-fast知多少

    目录 简介 Fail-fast Iterator Fail-fast 的原理 Fail-safe Iterator 总结 fail-safe fail-fast知多少 简介 我们在使用集合类的时候,通 ...

  5. Libra教程之:Libra testnet使用指南

    文章目录 Libra testnet网络 下载和安装Libra 编译Libra client并连接到Testnet网络 创建两个A和B的两个账号 检查libra cli Client是否运行 创建A的 ...

  6. 使用3种协议搭建本地yum仓库

    关闭防火墙和selinux [root@qls yum.repos.d]# systemctl stop firewalld (stop,start,disable,enable) [root@qls ...

  7. 【linux题目】第二关

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

  8. Linux分类

    Linux versions:http://www.cnblogs.com/sammyliu/articles/4832157.html1. Maintained by organization- D ...

  9. TEC-004-php文件下载任意文件读取漏洞修复

    修改download?u参数值,将/public/files/14842030529.txt,替换为../../../../../../../../../../etc/passwd    functi ...

  10. Java pdf转高清图片

    为什么80%的码农都做不了架构师?>>>   package com.hyb.kai.web.controller; import java.awt.image.BufferedIm ...