基于Redux原理的使用和用法

1、Redux 原理

   redux框架基于flux（flux是react专用的一个状态管理器）设计思想、设计模式来开发实现的一个js库，它不是react的专用

   vuex也是基于flux原理来的一个库

redux 三大设计原则：数据源单一、state只读、纯函数修改

       单一数据源原则 -- 全局只有一个，所以是一个单例

      数据只读原则 -- 所有的数据只能读取，不能进行修改

     只能使用纯函数来进行数据修改  -- 修改数据必须使用函数来修改数据

单一数据源 ：

  要保证它不是全局变量（如果是全局变量，会引起全局变量污染），在js中有一个闭包可以避免数据全局污染

 闭包：定义一个函数，在函数中进行数据定义，然后返回获取数据、更新数据的函数

 纯函数修改：输出完全依赖输入的值

 纯函数 -- 输出完全依赖输入：它不能修改、使用全局变量，它不受外部的影响，任何时候，任何地方输入同样的值，只会得到输入同样的结果

//客户数据源绝对不是闭包中的数据，但是要托管到闭包中
//定义一个闭包，然后这个闭包是用于管理state数据的对象，所以可以这样描述：
 
  var initState={ count:12}
//应该有一个可以把初始值传递进去的方法，并且可以实现数据更新的方法
//它应该是一个纯函数（因为它要执行数据更新 -- 纯函数），需要接收需要处理的数据，然后接收进行什么样的数据处理方式
//action对象中应该有type来指定执行哪些业务{type:String,....args}
//reducer首次调用会undefined，所以可以使用ES6的默认值
function reducer(originState = initState,action){
  //纯函数不能影响人家的数据，所以需要深拷贝
  let newState=JSON.parse(JSON.stringify(originState))
  switch(action.type){
  case 'add':
     newState.count += action.step
     return newState
  case 'patch':
     newState.count += action.step
     return newState
  case 'minus':
     newState.count -= action.step
    return newState
  default:
    return newState
}
}
//定义一个闭包，然后这个闭包是用于管理state数据的对象，所以可以这样描述：创建（create）一个管理数据的仓库对象(store),所以也可以叫一个名字
function createStore(_reducer){
 //因为createStore是一个管理器，应该具备通用性，所以不能把数据写死在这里，需要进行业务解耦
//var state={count : 10}
 var state;
 //因为reducer是执行数据更新的纯函数，那么可以传递一个空值()的state数据给他，然后它把用户需要托管的数据返回给我，然后我们进行数据缓存
//因为reducer需要一个action对象，然后type要避免和人家的type重复，所以type必须唯一，所以使用值
 state= _reducer(state,{type:Symbol('reducer')})
//给出一个获取state数据的接口给外部使用
function getState(){
  return state
}
//给外部提供一个调用(dispatch)reducer来执行action动作的方法，所以这个方法要接收一个action
 function dispatch(action){
   //执行reducer函数得到一个新的state数据，并缓存这个数据
  state = _reducer(state,action)
 console.log(state)
//这里一定数据更新执行完成了
//在这里执行render回调函数
listeners.forEach(cb =>{
   cb()
})
}
//给出一个消息订阅机制，把需要数据更新的方法传递给当前方法，然后数据更新以后，调用这个回调方法
//使用一个数组把cb全部缓存起来，然后数据更新后，全部执行一次
let listeners=[]
  function subscribe(cb){
   listeners.push(cb)
}
//它应该是返回一个函数集 -- 因为要涉及到数据获取和数据修改的函数
 return{
  getState,
   dispatch,
  subscribe
}
}
//执行createStore函数会得到一个对象
// var store = Redux.createStore(reducer)
// 订阅数据更新方法
store.subscribe(render)
// 数据修改  -- 页面需要点击事件
function btnEvt(type,step){
  //这里不能直接调用reducer，因为reducer需要一个state数据，而state数据在createStore方法中，所以reducer只能是createStore中的方法来调用
//这里执行了数据修改，那么谁才知道数据一定是更新完成？dispatch方法知道，那么就等createStore告知数据更新完成
  store.dispatch({type,step})
}
function render(){
  //要获取state数据进行页面渲染，那么应该调用方法来获取
valueNode.innerText = store.getState().count
}
render()

2.html和按钮

<!-- <div style="font-size:0;">  这是解决按钮行内元素之间间隙，可以对齐-->
<div>
<h2>购物车</h2>
<hr>
<!-- <span class="btn">按钮对齐</span><span> 这样将下一个标签开头跟上前面的标签后面就不会有空格间隙 或者将一行标签放在一行就也是可以老项目也是这样解决问题居多</span> -->

<span onclick="btnEvt('patch',12)" class="btn">按打增加</span>
<span onclick="btnEvt('add',6)" class="btn"> 增加</span>
<span  id="valueNode" class="value">1</span>
<span onclick="btnEvt('minus',2)" class="btn">减少</span> 
</div>