Redux 基础概念
Redux is a predictable state container for JavaScript apps.
,亦即 Redux 希望能提供一个可以预测的 state 管理容器,让开发者可以可以更容易开发复杂的 JavaScript 应用程式(注意 Redux 和 React 并无相依性,只是和 React 可以有很好的整合)。const store = createStore(fn);
const state = store.getState();
type: 'ADD_TODO',
payload: 'Learn Redux'};
ADD_TODO
,它携带的信息是字符串Learn Redux
。function addTodo(text) {
return {
type: ADD_TODO,
text
}}
store.dispatch()
是 View 发出 Action 的唯一方法。const store = createStore(fn);
store.dispatch({
type: 'ADD_TODO',
payload: 'Learn Redux'});
store.dispatch
接受一个 Action 对象作为参数,将它发送出去。// ...
const reducer = (state = defaultState, action) => {
switch (action.type) {
case 'ADD':
return state + action.payload;
default:
return state;
}};
const state = reducer(1, {
type: 'ADD',
reducer
函数收到名为ADD
的 Action 以后,就返回一个新的 State,作为加法的计算结果。其他运算的逻辑(比如减法),也可以根据 Action 的不同来实现。store.dispatch
方法会触发 Reducer 的自动执行。为此,Store 需要知道 Reducer 函数,做法就是在生成 Store 的时候,将 Reducer 传入createStore
方法。const store = createStore(reducer);
createStore
接受 Reducer 作为参数,生成一个新的 Store。以后每当store.dispatch
发送过来一个新的 Action,就会自动调用 Reducer,得到新的 State。reduce
方法的参数。请看下面的例子,一系列 Action 对象按照顺序作为一个数组。{ type: 'ADD', payload: 0 },
{ type: 'ADD', payload: 1 },
{ type: 'ADD', payload: 2 }];
const total = actions.reduce(reducer, 0); // 3
actions
表示依次有三个 Action,分别是加0
、加1
和加2
。数组的reduce
方法接受 Reducer 函数作为参数,就可以直接得到最终的状态3
。function reducer(state, action) {
return Object.assign({}, state, { thingToChange });
// 或者
return { ...state, ...newState };}
// State 是一个数组
function reducer(state, action) {
return [...state, newItem];}
store.subscribe
方法设置监听函数,一旦 State 发生变化,就自动执行这个函数。const store = createStore(reducer);
store.subscribe(listener);
render
方法或setState
方法)放入listen
,就会实现 View 的自动渲染。store.subscribe
方法返回一个函数,调用这个函数就可以解除监听。let unsubscribe = store.subscribe(() =>
console.log(store.getState()));
createStore
方法还可以接受第二个参数,表示 State 的最初状态。这通常是服务器给出的。window.STATE_FROM_SERVER
就是整个应用的状态初始值。注意,如果提供了这个参数,它会覆盖 Reducer 函数的默认初始值。createStore
方法的一个简单实现,可以了解一下 Store 是怎么生成的。let state;
let listeners = [];
const getState = () => state;
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
const subscribe = (listener) => {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
}
};
dispatch({});
return { getState, dispatch, subscribe };};
const { type, payload } = action;
switch (type) {
case ADD_CHAT:
return Object.assign({}, state, {
chatLog: state.chatLog.concat(payload)
});
case CHANGE_STATUS:
return Object.assign({}, state, {
statusMessage: payload
});
case CHANGE_USERNAME:
return Object.assign({}, state, {
userName: payload
});
default: return state;
}};
return {
chatLog: chatLog(state.chatLog, action),
statusMessage: statusMessage(state.statusMessage, action),
userName: userName(state.userName, action)
}};
combineReducers
方法,用于 Reducer 的拆分。你只要定义各个子 Reducer 函数,然后用这个方法,将它们合成一个大的 Reducer。const chatReducer = combineReducers({
chatLog,
statusMessage,
userName
})
export default todoApp;

type
和 payload
的物件。由于 Redux 官方也没有特别明确或严谨的规范。在一般情况我会将 reducers 分为 data
和单纯和 UI 有关的 ui
state。但由于这边是比较简单的例子,我们最终只使用到 src/reducers/data/todoReducers.js
。
import ui from './ui/uiReducers';// import routes from './routes';import todo from './data/todoReducers';// import routes from './routes';
const rootReducer = combineReducers({
todo,
});
export default rootReducer;
Redux 基础概念的更多相关文章
- redux基础概念及执行流程详解
一.执行流程 全局有一个公共的容器(所有组件都可以操作),我们可以在某个组件中把全局容器中的信息进行修改,而只要全局信息修改,就可以通知所有用到该信息的组件重新渲染(类似于发布订阅)==>red ...
- Redux 核心概念
http://gaearon.github.io/redux/index.html ,文档在 http://rackt.github.io/redux/index.html .本文不是官方文档的翻译. ...
- 【Machine Learning】机器学习及其基础概念简介
机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...
- TCP/IP基础概念及通信过程举例
TCP/IP基础概念及通信过程举例 出现 上个世纪60年代,由于中央集中式网络的容灾性较弱,以美国国防部为中心的一家组织研究出分组交换网络.后来为了验证分组交换技术的实用性,ARPANET出现了,并且 ...
- Jmeter基础之---jmeter基础概念
Jmeter基础之---jmeter基础概念 JMeter 介绍: 一个非常优秀的开源的性能测试工具. 优点:你用着用着就会发现它的重多优点,当然不足点也会呈现出来. JMeter 介绍: 一个非常优 ...
- 快速入门系列--WCF--01基础概念
转眼微软的WCF已走过十个年头,它是微软通信框架的集大成者,将之前微软所有的通信框架进行了整合,提供了统一的应用方式.记得从自己最开始做MFC时,就使用过Named Pipe命名管道,之后做Winfo ...
- 理解 angular2 基础概念和结构 ----angular2系列(二)
前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependen ...
- JavaBean 基础概念、使用实例及代码分析
JavaBean 基础概念.使用实例及代码分析 JavaBean的概念 JavaBean是一种可重复使用的.且跨平台的软件组件. JavaBean可分为两种:一种是有用户界面的(有UI的):另一种是没 ...
- RabbitMQ基础概念详细介绍
http://blog.csdn.net/column/details/rabbitmq.html 转至:http://www.ostest.cn/archives/497 引言 你是否遇到过两个(多 ...
随机推荐
- 线程调度策略SCHED_RR(轮转法)和SCHED_FIFO(先进先出)之对照
我们在用pthread创建线程时,能够指定调度策略policy--SCHED_OTHER(默认).SCHED_RR和SCHED_FIFO.这里TALK一下两个实时策略--SCHED_RR和SCHED_ ...
- 异常:”未处理System.TypeLoadException“
1.问题由来: 在敲系统时原来的已有的类都能正常的执行,可是当加入一个新的实体类CancelCard的时候系统执行时显示错误例如以下: watermark/2/text/aHR0cDovL2J ...
- HDU 5305(Friends-暴搜)
Friends Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Su ...
- Android实现一个自己定义相机的界面
我们先实现拍照button的圆形效果哈.Android开发中,当然能够找美工人员设计图片,然后直接拿进来.只是我们能够自己写代码实现这个效果哈.最经常使用的的是用layout-list实现图片的叠加, ...
- geek青年的状态机,查表,纯C语言实现
geek青年的状态机,查表,纯C语言实现 1. 问题的提出.抽象 建一,不止是他,不少人跟我讨论过这种问题:怎样才干保证在需求变更.扩充的情况下.程序的主体部分不动呢? 这是一个很深刻和艰难的问题.在 ...
- “2014年ArcGIS影像高级培训班——5月份北京站”火热报名中!
您从事遥感类的相关工作吗?您正对着一景景影像数据不知从何下手吗?您有TB级甚至更高量级的影像数据须要有效管理.即时分享吗?您须要构建Web端的应用实现影像实时处理.在线分析吗? 您是否已经找到有效的解 ...
- 我所不知道的 javascript 函数
对字符串进行 Base64 加密: window.btoa(str) ---转码 window.atob(str) ---解码 这种加密方法不能加密中文,可以先进行 encodeURIComponen ...
- python 文档生成 字符串替换
替换 fnr, fnr_source, fnw = 'my.py.html', '产品清单.txt', 'my.py.res.html'd_source = {}with open(fnr_sourc ...
- 4.4系统,拍照-裁剪,resultCode返回0
问题描述: take photo -> 拍照 -> 确定 -> 截图 -> 保存,此时返回给onActivityResult的resultCode是0,截图无效.我查看图片储存 ...
- C# 学习笔记 三层架构系列(控件一)
下面是我两周的学习总结:这是我写给自己的,如果哪位朋友有幸看到这篇文章就是缘分.如果所说的内容不对,就请纠正.勿喷!!! 想要将两周的学习知识通过文字.通过代码.通过图片储备起来,以防自己那天思维短路 ...