Redux单独在HTML中的用法

最新推荐文章于 2024-07-25 11:26:35 发布

华玖

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量176

点赞数 2

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_30675311/article/details/139198651

版权

引入redux.js：

https://cdn.bootcdn.net/ajax/libs/redux/4.2.0/redux.min.js

第一步：定义 reducer函数作用：根据定义的数据状态修改之后返回新的状态

function reducer(state = {count: 0}, action) {
        if (action.type === "ADD") {
            state.count = state.count + 1;
            return state
        }

        if (action.type === "REDUCE") {
            state.count = state.count - 1
            return state
        }

        return state
    }

第二步：通过createStore方法,创建store 实例对象

  const store = Redux.createStore(reducer);
    console.log(store);

第三步：订阅实例store的subscribe方法

  store.subscribe(() => {
        document.getElementById("count").innerHTML = store.getState().count;
    })

第四步：触发实例store 的 dispatch方法提交Action

  store.dispatch({
                type: "REDUCE"
            })

//第五步：通过实例store的getState方法获取最新的数据状态

store.getState().count;

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Redux</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/redux/4.2.0/redux.min.js"></script>

</head>
<body>
<button id="reduction">-</button>
<button id="count">0</button>
<button id="add">+</button>


<script>

    //第一步：定义 reducer函数 作用：根据定义的数据状态修改之后返回新的状态
    function reducer(state = {count: 0}, action) {
        if (action.type === "ADD") {
            state.count = state.count + 1;
            return state
        }

        if (action.type === "REDUCE") {
            state.count = state.count - 1
            return state
        }

        return state
    }

    //第二步：通过createStore方法,创建store 实例对象
    const store = Redux.createStore(reducer);
    console.log(store);


    //第三步：订阅实例store的subscribe方法
    store.subscribe(() => {
        document.getElementById("count").innerHTML = store.getState().count;//第五步：通过实例store的getState方法获取最新的数据状态
    })
    onAdd()
    //添加
    function onAdd() {
        let ele = document.getElementById("add");
        ele.addEventListener('click', () => {
            //第四步：触发实例store 的 dispatch方法 提交Action
            store.dispatch({
                type: "ADD"
            })
        })
    }

    onReduce();

    //减少
    function onReduce() {
        let ele = document.getElementById("reduction");
        ele.addEventListener('click', () => {
            //第四步：触发实例store 的 dispatch方法 提交Action
            store.dispatch({
                type: "REDUCE"
            })
        })
    }


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

华玖

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Redux单独在HTML中的用法

引入redux.js：第一步：定义 reducer函数作用：根据定义的数据状态修改之后返回新的状态第二步：通过createStore方法,创建store 实例对象第三步：订阅实例store的subscribe方法第四步：触发实例store 的 dispatch方法提交Action//第五步：通过实例store的getState方法获取最新的数据状态完整代码如下：
复制链接

扫一扫