Redux

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。

!!!action函数必须返回一个带有type属性的plain object

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样式表

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容