Redux

标签：应用   不可变   stat   style   tool   ext   变化   接收   封装   

Redux是一个数据状态管理插件；每个系统都需要一个管理多组件使用的公共信息功能；例如，用户登录之后客户端会存储用户信息userid和头像等，而系统的每个组件都需要用到这些信息，如收藏点评品论等。

基本使用：

1.定义计算规则，即reducer     在规则函数中，数据变化时要return一个新的值，而不能直接修改原来的值；使用了 不可变数据 的设计方式，来明确数据的变化时段，使得数据管理更清晰，复杂度更低。

function counter(state = 0,action){

　　switch(action.type){

　　　　case ‘INCREMENT‘:

　　　　　　　　return state+1      

　　　　case ‘DECREMENT‘:

　　　　　　　　return state-1

　　　　default:

　　　　　　　　return state

　　}

}

2.根据计算规则生成 store,根据计算规则创建store规则文件

let store = createStore(counter)

3.定义数据（即state）变化之后的派发规则

store.subscribe(() => {

　　console.log(‘current state‘,store.getState())

})

4.触发数据变化

store.dispatch({type:‘INCREMENT‘})

store.dispatch({type:‘INCREMENT‘})

store.dispatch({type:‘DECREMENT‘})

Redux是一个管理数据的工具，我们创建一个store变量来管理数据。创建store的前提是设定一个管理规则counter，默认state是0。

用store来管理数据，具体的管理形式是什么？

a.要通过一个函数来触发数据的变化，即dispatch，遵守之前的规则。

b.数据一旦发生变化，会导致什么样的后果，即执行subscribe中定义的函数

c.如何取到当前的数据，即store.getState()

Redux和React集成

1创建store，第一个参数是规则，第二个参数是初始化的数据，第三个参数是可调起的chrome扩展程序redux-devtools

const store = createStore(rootReducer,initialState,

　　window.devToolsExtension ? window.devToolsExtension() : undefined      触发redux-devtools

 )

b.创建规则Reducer, 现实中，数据结构复杂太多，必须分组管理。需要用state.userinfo来表示用户数据，state.nav表示导航数据，state.ad表示广告数据......

c.创建action，实际应用中，需要一些函数将它分封起来，即./app/actions中的文件，我们把每个业务操作都封装为一个函数，接收data，－－>再根据reducer的规则对data进行分装，－－>最后返回给dispatch来处理。

Redux

标签：应用   不可变   stat   style   tool   ext   变化   接收   封装   

原文地址：http://www.cnblogs.com/yxiaoqian/p/6127754.html