redux笔记
2016-03-30 18:22
609 查看
Introduction
Motivation
http://redux.js.org/docs/introduction/Motivation.htmlMutation & Asynchronicity
Solving by imposing certain restrictions -- Principles
Principles
http://redux.js.org/docs/introduction/ThreePrinciples.htmlSingle source of truth
The state of your whole application is stored in an object tree within asingle
store
State is read-only
the only way to mutate the state is to emit an action, an objectdescribe what happened
Changes are made with pure functions
to specify how the state tree is transformed by actions, you write purereducers
Basics
Actions
http://redux.js.org/docs/basics/Actions.htmlhttp://redux.js.org/docs/recipes/ReducingBoilerplate.html
actions are payloads of information that send data from your application to your store.
define action type:
const ADD_TODO = 'ADD_TODO';
action object:
{
type: ADD_TODO,
payload: {
text: "this is todo text"
}
}
action creators:
action creators are exactly that -- functions that create actions
function addTodo(text) {
return {
type: ADD_TODO,
payload: {
text: text
}
};
}
async actions
Reducers
Actions describe something happened, but don't specify how the application's state changes in response. This is the job of a reducer.design the state shape
{ todos: [ ... ], .... }
handling actions
(previousState, action) => newState
initialState = { todos: [] };
function todoApp (state = initialState, action) {
switch (action.type) {
case ADD_TODO:
return Object.assign({}, state, {
todos: [
...state.todos,
{
text: action.payload.text
}
]
});
default:
return state;
}
}
split reducers / handle more actions
Store
http://redux.js.org/docs/basics/Store.htmlresponsibilities:
1. holds application state (from reducer)
2. allows access state via store.getState()
3. allows state to be updated via store.dispatch(action)
4. store.subscribe(listener)
5. unsubscribe
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)
let unsubscribe = store.subscribe(() => console.log('state changed'));
unsubscribe();
Data Flow
Advanced
Async Actions
ajax call相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- [译] Flux 入门
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法