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;
最新文章
- bzoj4462: [Jsoi2013]编程作业
- php webservice
- Unity 5.4 测试版本新特性---因吹丝停
- 使用AndroidStudio自动生成JavaDoc文档
- cookie.js 加载顺序问题
- node.js&;mongodb&;express 搭建个人博客系统
- javascript基础学习(五)
- eclipse 使用maven 创建web3.1项目
- ThinkPHP框架设计与扩展总结
- 关于 Eclipse中的Web项目 部署的文件位置 查看jsp源码的部署位置
- CSS3新特性汇总
- MySQL使用细节
- Ueditor注意的地方
- LeetCode(118):杨辉三角
- springboot中get post put delete 请求
- win静态库动态库
- 三、Kubernetes之深入了解Pod
- 多用户在线人数监听(基于TomCat)
- WPF Get jiayuan outbox list(send mail box)
- 算法笔记_231:网格中移动字母(Java)
热门文章
- MT6753平台一项目不同手机最低亮度存偏差问题分析过程
- (三)用openCV在图片上绘画标记
- codeforces gym 100357 J (网络流)
- [kuangbin带你飞]专题四 最短路练习 G MPI Maelstrom
- 在docker上安装运行mysql实例
- Ubuntu下常规方法安装软件
- Angularjs中添加ckEditor插件
- 1. CountDiv 数数有几个 Compute number of integers divisible by k in range [a..b].
- Spring技术内幕:Spring AOP的实现原理(五)
- POJ 1300 Door Man(欧拉通路)