Redux API之creatStore
createStore(reducer, [initialState])
创建一个 Redux store 来以存放应用中所有的 state。
应用中应有且仅有一个 store。
参数
reducer(Function): 接收两个参数,分别是当前的 state 树和要处理的 action,返回新的 state 树。[
initialState] (any): 初始时的 state。 在同构应用中,你可以决定是否把服务端传来的 state 水合(hydrate)后传给它,或者从之前保存的用户会话中恢复一个传给它。如果你使用combineReducers创建reducer,它必须是一个普通对象,与传入的 keys 保持同样的结构。否则,你可以自由传入任何reducer可理解的内容。
返回值
(Store): 保存了应用所有 state 的对象。改变 state 的惟一方法是 dispatch action。你也可以 subscribe 监听 state 的变化,然后更新 UI。
import { createStore } from 'redux'
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([ action.text ])
default:
return state
}
}
let store = createStore(todos, [ 'Use Redux' ])
store.dispatch({
type: 'ADD_TODO',
text: 'Read the docs'
})
console.log(store.getState())
// [ 'Use Redux', 'Read the docs' ]
小贴士
应用中不要创建多个 store!相反,使用
combineReducers来把多个 reducer 创建成一个根 reducer。你可以决定 state 的格式。你可以使用普通对象或者 Immutable 这类的实现。如果你不知道如何做,刚开始可以使用普通对象。
如果 state 是普通对象,永远不要修改它!比如,reducer 里不要使用
Object.assign(state,newData),应该使用Object.assign({}, state, newData)。这样才不会覆盖旧的state。也可以使用Babel 阶段 1 中的 ES7 对象的 spread 操作 特性中的return { ...state, ...newData }。对于服务端运行的同构应用,为每一个请求创建一个 store 实例,以此让 store 相隔离。dispatch 一系列请求数据的 action 到 store 实例上,等待请求完成后再在服务端渲染应用。
当 store 创建后,Redux 会 dispatch 一个 action 到 reducer 上,来用初始的 state 来填充 store。你不需要处理这个 action。但要记住,如果第一个参数也就是传入的 state 如果是
undefined的话,reducer 应该返回初始的 state 值。
Redux API之creatStore的更多相关文章
- Redux API
Redux API Redux的API非常少.Redux定义了一系列的约定(contract),同时提供少量辅助函数来把这些约定整合到一起. Redux只关心如何管理state.在实际的项目中 ...
- Redux API之applyMiddleware
applyMiddleware(...middlewares) 使用包含自定义功能的 middleware 来扩展 Redux 是一种推荐的方式.Middleware 可以让你包装 store 的di ...
- Redux API之Store
Store Store 就是用来维持应用所有的 state 树 的一个对象. 改变 store 内 state 的惟一途径是对它 dispatch 一个action. Store 不是类.它只是有几个 ...
- React深入 - 手写redux api
简介: 手写实现redux基础api createStore( )和store相关方法 api回顾: createStore(reducer, [preloadedState], enhancer) ...
- Redux API之bindActionCreators
bindActionCreators(actionCreators,dispatch) 把 action creators 转成拥有同名 keys 的对象,但使用 dispatch 把每个 actio ...
- Redux API之compose
compose(...functions) 从右到左来组合多个函数. 这是函数式编程中的方法,为了方便,被放到了 Redux 里. 当需要把多个 store 增强器 依次执行的时候,需要用到它. 参数 ...
- Redux API之combineReducers
combineReducers(reducers) 随着应用变得复杂,需要对 reducer 函数 进行拆分,拆分后的每一块独立负责管理 state 的一部分. combineReducers 辅助函 ...
- Redux基础
Redux 是一个状态容器 Redux 就像是作者自己的介绍,它不会为你提供任何的东西,它不会告诉你如何做路由,它只专注于应用程序状态,是一个 JavasSript 的状态容器,所有的状态的变化都是当 ...
- React+Redux学习笔记:React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
随机推荐
- 【Android】图片(文件)上传的请求分析结构
怎么在android中上传文件,即怎么用Java向服务器上传文件.上传图片,这是个老问题了,在网上能搜到现成的代码,很多朋友用起来也比较熟了,但是为什么这么写,可能很多朋友并不清楚,这篇文章就来分析一 ...
- (转)ConcurrentModificationException异常原因和解决方法
原文地址: http://www.cnblogs.com/dolphin0520/p/3933551.html 一.ConcurrentModificationException异常出现的原因 先看下 ...
- rtsp转rtmp、hls网页直播服务器EasyNVR前端兼容性调试:ie下的 pointer-events- none
发现问题: 之前在做EasyNVR 的web页面开发过程中,力求的都是一个播放效果的.功能的展示.对于兼容性也有注意,但有些细节还是难免有所疏忽. 内部测试发现:由于我们是流媒体的实时视频直播,在we ...
- cordova 实现拨打电话-只需两步(H5)
cordova 实现拨打电话: 第一步配置conf.xml在cordova中所有的URL Schemes 都是服从于白名单的,所以a tel 在这无法正常使用.解决方法是在项目config.xml中添 ...
- SAP增强 和VA01相关增强点介绍
-转 sap寻找用户出口方法 sap的用户出口总共有三代: 一.User EXIT 第一代的用户出口,它们include在SAP标准程序的源代码里,可以说他们是源代码的一部分,你改了这种出口就相当于改 ...
- shell执行lua脚本传参数
#lua test.lua 2 5arg[0]= test.lua arg[1]= 2arg[2]= 5 if arg[1] and arg[1] == "2" then prin ...
- VIM中使用tab键自动完成(vim tab键自动补全 )插件supertab
supertab.vmb 这个插件好好用, Tab自动补全 http://www.vim.org/scripts/script.php?script_id=1643 安装步骤: 1.下载 supert ...
- flask的请求上下文源码解读
一.flask请求上下文源码解读 通过上篇源码分析( ---Flask中的CBV和上下文管理--- ),我们知道了有请求发来的时候就执行了app(Flask的实例化对象)的__call__方法,而__ ...
- Android蓝牙通讯【转】
本文转载自:http://blog.csdn.net/vnanyesheshou/article/details/51554852 随着可穿戴设备的流行,研究蓝牙是必不可少的一门技术了. 总结了下蓝牙 ...
- nginx应用 突破高并发的性能优化
摘自:http://www.cnblogs.com/kevingrace/p/6094007.html 在日常的运维工作中,经常会用到nginx服务,也时常会碰到nginx因高并发导致的性能瓶颈问题. ...