首页 > 代码库 > Redux

Redux

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