Redux的设计思想:
Redux的工作流程:
首先,用户发出Action
store.dispatch(action);
然后,Store自动调用Reducer,并且传入两个参数:当前State和收到的Action。Reducer会返回新的State。
let nextState = todoapp(previousState,action);
State一旦有变化,Store就会调用监听函数。
store.subscribe(listener)
listener可以通过store.getState()得到当前状态。如果使用的是React,这时可以触发重新渲染View。
function listener(){
let newState = store.getState();
compoent.setState(newState);
}
Store收到Action以后,必须给出 一个新的State,这样View才会发生变化。这种State的计算过程叫做Reducer。
Reducer是一个函数,store.dispatch方法会触发 Reducer 的自动执行。为此,Store 需要知道 Reducer 函数,做法就是在生成 Store 的时候,将 Reducer 传入createStore方法。
const defaultState = 0;
const reducer = (state = defaultState,action)=>{
switch(action.type){
case ‘ADD’:
return state + action.payload;
default:
returnstate;
}
}
import { createStore } from 'redux';
const store=createStore(reducer); //createStore用来生成Store
const state=store.getState(); //对Store生成快照(即数据集合State)
store.dispatch({ //store.dispatch是View发出Action的唯一方法
type:'ADD_TODO',
payload:'Learn Redux'
});
store.subscribe(listener); //store.subscribe方法设置监听函数,一旦State发生变化,就自动执行这个函数
重新整理(2016-12-9)
action-->reducer-->createStore
action:我们得用专门的处理函数,在各个数据来源里筛选出我们真正需要的数据,不把那些无关紧要的、甚至是脏的数据污染了我们的全局数据对象。这种对数据来源做萃取工作的函数,就叫action。
reducer:reducer就是迎接 action 函数返回的线索的「数据再处理函数」, action 是「预处理函数」。
createStore:
No.1 创建预处理,筛检垃圾信息
No.2 根据action返回的信息,执行对应函数(对应的函数在No.8里定义)
No.3 执行createStore
No.4 设置路由!!!!
No.5 配置目标网站(根目录)
No.6 编译的入口文件
No.7 ajax文件
No.8 各页面DOM
No.9 CSS样式表