react学习（10）

1：Redux
集中状态管理工具，可以独立运行。

• 使用步骤
  1.定义一个reducer函数（根据当前想要做的修改返回一个新的状态）
  2.使用createStore方法传入reducer函数，生成一个store实例对象
  3.使用store实例的subscribe方法订阅数据的变化（数据一旦变化，可以得到通知）
  4.使用store实例的dispatch方法提交action对象触发数据变化（告诉reducer你想怎么改数据）
  5.使用store实例的getState方法获取最新的状态数据更新到视图中。

//第一步：
function reducer(state = {count:0},action){
  if(action.type ==='increment'){
    return {count:state.count+1}
  }else if(action.type ==='decrement'){
    return {count:state.count+1}
  }else{
    return state
  }
}

//第二步
const store = Redux.createStore(reducer);

//第三步:state变化的时候自动执行
store.subscribe(()=>{
  console.log(store.getState());
  document.getElementById('count').innerText =store.getState().count
 })
//第四步
const inBtn = document.getElementById('increment');
inBtn.addEventListener('click',()=>{
  store.dispatch({type:'increment'})
})
const deBtn = document.getElementById('decrement');
deBtn.addEventListener('click',()=>{
  store.dispatch({type:'decrement'})
})

【信息由网络或者个人提供，如有涉及版权请联系COOY资源网邮箱处理】