【Redux实战】基于ES5的原生Redux API，实现原生版Counter

最新推荐文章于 2024-07-03 21:57:10 发布

Milk595

最新推荐文章于 2024-07-03 21:57:10 发布

阅读量138

点赞数

分类专栏： Redux实战文章标签： react

本文链接：https://blog.csdn.net/weixin_43352901/article/details/108361786

版权

Redux实战专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基于ES5的原生Redux API，实现原生版Counter

先看效果

在这里插入图片描述

当点击 + 时，数值加1

在这里插入图片描述

当点击 - 时，数值减1

在这里插入图片描述

当点击 Increment if odd 时，会判断当前 store 里面的 state 是否不为偶数，当不为偶数则加1，否则没有效果

第一次点击，没效果

在这里插入图片描述
当加到1时候，再次点击，则加1

当点击 Increment async 时，异步执行，定时器，执行一次一秒后加1

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Redux basic example</title>
  <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
    <div>
      <p>
        Click: <span id="value">0</span> times
        <button id="increment">+</button>
        <button id="decrement">-</button>
        <button id="incrementIfOdd">Increment if odd</button>
        <button id="incrementAsync">Increment async</button>
      </p>
    </div>
    <script>
       // reducer
       function counter(state, action) {
         if(typeof state === 'undefined') {
           return 0
         }

         switch(action.type) {
          case 'INCREMENT':
            return state + 1
          case 'DECREMENT':
            return state - 1
          default: 
            return state 
         }
       }

       // 创建 Redux store 来存放应用的状态
       var store = Redux.createStore(counter)

       // 获取dom元素
       var valueEl = document.getElementById('value')
       
       // 把store里面的state状态作为值赋值到dom元素中（即页面显示）
       function render() {
         valueEl.innerHTML = store.getState().toString()
       }
       
       render()
       
       // 添加一个变化监听器。每当 dispatch action 的时候就会执行，state 树中的一部分可能已经变化。你可以在回调函数里调用 getState() 来拿到当前 state。
       store.subscribe(render)

       document.getElementById('increment')
         .addEventListener('click', function() {
           store.dispatch({ type: 'INCREMENT' })
         })
       
       document.getElementById('decrement')
         .addEventListener('click', function() {
           store.dispatch({ type: 'DECREMENT' })
         })
        
       document.getElementById('incrementIfOdd')
         .addEventListener('click', function() {
           console.log(store.getState());
           if(store.getState() % 2 !== 0) {
             store.dispatch({ type: 'INCREMENT' })
           }
         })

       document.getElementById('incrementAsync')
         .addEventListener('click', function() {
           setTimeout(function () {
             store.dispatch({ type: 'INCREMENT' })
           }, 1000)
         })

    </script>
</body>
</html>