redux-1

时间：2017-11-28 19:47:11 阅读：117 评论：0 收藏：0 [点我收藏+]

一、.redux工作流程

技术分享图片

1.用户发出action

store.dispatch(action);

2.store自动调用reducer，并传入2个参数：当前state和收到的action，reducer会返回新的state

let nextState = todoApp(previousState, action);

eg:

const reducer =(state=0,action)=>{

switch(action.type){

case ‘INCREMENT‘:return state+1;

case ‘DECREMENT‘:return state-1;

default:return state;

}

};

const store=createStore(reducer);

3.state一旦有变化，store就会调用监听函数

store.subscribe(listener);

listener可以通过store.getState()得到当前状态

eg:

const render=()=>{

ReactDOM.render(

<Counter

value={store.getState()}

onIncrement={()=>store.dispatch({type:‘INCREMENT‘})}

onDecrement={()=>store.dispatch({type:‘DECREMENT‘})}/>,

document.getElementById("root")

);

};

store.subscribe(render);

二、redux实例--点击计数

三、基本概念

3.1store

Store 就是保存数据的地方,整个应用只能有一个 Store

3.2

参考：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

原文地址：http://www.cnblogs.com/cdx0/p/redux1.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行