网站建设实践描述,国外 设计网站,读书网站排名,怎么用网站源码建站1.redux是用于和react搭配使用的状态管理工具#xff0c;类似于vue的vuex。redux可以不和任何框架绑定#xff0c;独立使用 2.使用步骤 #xff08;1#xff09;定义一个reducer函数#xff08;根据当前想要做的修改返回一个新的状态#xff09; #xff08;2#xff0…1.redux是用于和react搭配使用的状态管理工具类似于vue的vuex。redux可以不和任何框架绑定独立使用 2.使用步骤 1定义一个reducer函数根据当前想要做的修改返回一个新的状态 2使用createStore方法传入erducer函数生成一个store实例对象 3使用store实例的subscribe方法订阅数据变化数据一旦变化可以得到通知 4使用store实例的dispatch方法提交action对象 触发数据变化告诉reducer你想要怎么改数据 5使用store实例的getState方法获取最新的状态数据更新到视图中 3.代码案例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodybutton iddecrement-/buttonspan idcount0/spanbutton idincrement/buttonscript srchttps://cdn.bootcss.com/redux/4.0.0/redux.js/scriptscript// 1.定义reducer函数// 作用根据不同的action对象返回不同的新的state// state:管理的数据初始状态// action对象type标记当前想要做什么样的修改function reducer(state { count: 0 }, action) {// 数据不可变基于原始状态生成一个新的状态if (action.type INCREMENT) {return { count: state.count 1 };}if (action.type DECREMENT) {return { count: state.count - 1 };}return state;}// 2.通过reducer函数生成store实例const store Redux.createStore(reducer);// 3.通过store实例的subscribe订阅数据变化// 回调函数可以在每次state发生变化时自动执行store.subscribe(() {console.log(state变化了);document.getElementById(count).innerText store.getState().count;});// 4.通过store实例的dispatch函数提交action更改状态const inBtn document.getElementById(increment);inBtn.addEventListener(click, () {store.dispatch({type: INCREMENT,});});const dBtn document.getElementById(decrement);dBtn.addEventListener(click, () {store.dispatch({type: DECREMENT,});});/script/body
/html
