cdn 引入redux，一步步打印学习redux

我们用cdn 的方法引入redux

首先我们要知道redux是基于单向数据流的，里面有三大核心 action reducer store

store是存储数据的地方。

在redux里，store值是不能随意修改的。修改state是通过reducer来完成。

具体来说，就是调用store.dispatch() 方法，然后经reducer返回新的store

dispatch() 方法里面传入的参数就是action对象

不懂不要紧，记住这个图

view层触发reducer，进而改变了store，然后数据(store)变化，视图(view)也跟着变了。

好的，我们先来引入redux，看看redux是什么

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script src="https://cdn.bootcss.com/redux/4.0.0/redux.js"></script>
  <script>
    console.log(Redux)
  </script>
</body>
</html>

打印Redux，发现，Redux是个对象，长这个样子

其中里面有个createStore方法，这个方法就是用来创建store，但是该方法还需要传入参数，其中第一个参数是reducer函数。

现在缺少reducer，所以我们先写reducer

reducer是个纯函数，给予行为和状态，会返回新的状态

(action,state) => state

那我们先写下reducer

<script>
   const counter = function(state=15,action) {
    switch (action.type) {
        case 'jia1':
          return state + 1
        case 'jian1':
          return state - 1
        default:
          return state  
    }
}
const store = Redux.createStore(counter)
console.log(store)
</script>

reducer中的action写的是计数器加和减，加1即jia1，减1即jian1
然后我们通过reducer成功创建了一个store

打印下吧，发现store是个对象，长这个样。

里面是store的所有api方法

这里我们先使用getState() 获取下store的值

console.log(store.getState())   //  15

发现store的初始默认值其实就是reducer函数中传入的默认值

要修改store的值的话，需要调用store的dispatch方法。

我们尝试调用一次，然后再打印下store的值，看看变化了没有

<script>
    const counter = function(state=15,action) {
        switch (action.type) {
            case 'jia1':
              return state + 1
            case 'jian1':
              return state - 1
            default:
              return state  
        }
    }
    const store = Redux.createStore(counter)
    console.log(store.getState())  //15
    store.dispatch({type:'jia1'})
    console.log(store.getState())   //16
</script>

发现调用了dispatch 方法后，store就变化了从15变到了16

dispatch里的就是action对象，它是用来描述发生了什么。

这里我们是直接传递的。在真正的项目里，要使用action创建函数，用来返回action对象。

<script>
    const counter = function(state=15,action) {
        switch (action.type) {
            case 'jia1':
              return state + 1
            case 'jian1':
              return state - 1
            default:
              return state  
        }
    }
    const store = Redux.createStore(counter)

    //使用action 创建函数
    const jia = function () {
        return {
            type: 'jia1'
        }
    }

    console.log(store.getState())
    store.dispatch(jia())
    console.log(store.getState())
</script>

发现这里和上面的写法效果是一致的。

最后再来说说store的另外一个方法，subscribe()

添加一个变化监听器，里面是个回调函数，每当dispatch action ，更改了state值后，就会进入subscribe() 里面的回调函数中。

例子如下

<script>
    const counter = function(state=15,action) {
        switch (action.type) {
            case 'jia1':
              return state + 1
            case 'jian1':
              return state - 1
            default:
              return state  
        }
    }
    const store = Redux.createStore(counter)

    //使用action 创建函数
    const jia = function (text) {
        return {
            type: 'jia1'
        }
    }

    store.subscribe(()=>{
        console.log(store.getState())
    });


    store.dispatch(jia())
    store.dispatch(jia())
    store.dispatch(jia())
    store.dispatch({type:'jian1'})
 </script>

这里先让它加1 3次，最后再减1一次

console.log(store.getState())的结果如下

监听到了store的变化，并打印出来了

难度升级，我们将store渲染到页面上，每次点击页面的时候，让其加1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="app"></div>

  <script src="https://cdn.bootcss.com/redux/4.0.0/redux.js"></script>

  <script>
    const counter = function(state=15,action) {
        switch (action.type) {
            case 'jia1':
              return state + 1
            case 'jian1':
              return state - 1
            default:
              return state  
        }
    }
    const store = Redux.createStore(counter)

    //使用action 创建函数
    const jia = function (text) {
        return {
            type: 'jia1'
        }
    }

    store.subscribe(()=>{
        document.getElementById('app').innerHTML = store.getState()
    });

    document.addEventListener('click', function() {
        store.dispatch(jia())  
    })
  </script>
</body>
</html>

这样写有个小bug，store的初始值并没有直接渲染到页面上，是因为我们在监听store变化的时候，才更新store的值。一上来的时候，并没有插入store的值到DOM元素上

改写上面的代码，思路：一开始的时候，就需要插入innerHTML。然后每次改变值，也需要插入innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="app"></div>

  <script src="https://cdn.bootcss.com/redux/4.0.0/redux.js"></script>

  <script>
    const counter = function(state=15,action) {
        switch (action.type) {
            case 'jia1':
              return state + 1
            case 'jian1':
              return state - 1
            default:
              return state  
        }
    }
    const store = Redux.createStore(counter)

    //使用action 创建函数
    const jia = function (text) {
        return {
            type: 'jia1'
        }
    }

    function render() {
        document.getElementById('app').innerHTML = store.getState()
    }
    store.subscribe(render);

    render()

    document.addEventListener('click', function() {
        store.dispatch(jia())  
    })
  </script>
</body>
</html>

再来看看这张核心图

本文参考了react官网的视频第六课

注意：实际项目中，并非直接使用script标签引入使用。

而是npm安装依赖包

cdn 引入redux，一步步打印学习redux

猜你喜欢