看到很多小伙伴一见到redux就头疼，笔者今天就来说说这个redux吧。

redux及其中间件介绍，参考：https://blog.csdn.net/lilygg/article/details/118256153

redux是一个

Redux三大原则：单一数据源、State是只读的、使用纯函数来执行修改。

Redux用法真没啥复杂的，简单的说吧，

Redux是一个js库，通过里边的createStore(reducer)可以生成一个store，把它导出来就可以在组件里边使用。组件需要更改数据，只需要store.dispatch({action:xx,payload:nnn})派发这样一个动作即可。

这个动作一旦被派发，就会触发reducer函数。reducer是个无副作用的纯函数。它接收两个参数：数据初始值和action对象，

在reducer纯函数里会根据action.type去做不同的数据更改操作，最终返回一个最新的状态，而不是直接更改原始数据。

以上就是redux的基本工作流程。

在组件更改了数据之后，想要做到实时同步（实时更新数据），需要开发者手动调用store.subscribe(()=>{ //在需要拿redux数据的地方进行数据拿取操作})，实时监听store仓库中数据的变化。

想要拿到redux里的xxx数据，可以通过store.getState().xxx拿到数据xxx。

好了，光说不练假把式，大家也是看得云里雾里，废话不多说，talk is cheap,show me your code.

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 页面演示 -->
  <button id="increment">+</button>
  <span id="count">0</span>
  <button id="decrement">-</button>
  <!-- 直接把redux包拔下来引入 -->
  <script src="./redux.min.js"></script>
  <script>
    var initialState = {
      count:1
    }
    function reducer(state=initialState,action){//action是构建redux时定义好的操作
      switch (action.type) {
        case 'incrementAction':
          return {...state,count:state.count+1}
        case 'decrementAction':
          return {...state,count:state.count-1}
        default:
          return state;
      }
      return state;
    }
    //创建状态
    var store = Redux.createStore(reducer);
    //获取redux状态中的值
    console.log(store.getState());//{count:1}
    //添加点击事件
    document.getElementById('increment').addEventListener('click',(res) => {
      store.dispatch({type:'incrementAction'})
    });
    document.getElementById('decrement').addEventListener('click',(res) => {
      store.dispatch({type:'decrementAction'})
    });
    //监听redux状态值的变化
    store.subscribe(() => {
      //把状态中的值注入到dom中
      document.getElementById('count').innerText=store.getState().count;
    })
  </script>
</body>
</html>

 

原文地址：http://www.cnblogs.com/yanglongbo/p/16800105.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性