首页 > 代码库 > 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