redux原生写法

最新推荐文章于 2024-06-13 02:48:16 发布

怕冷的火焰（~杰）

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量378

点赞数 11

分类专栏： redux 文章标签：前端

本文链接：https://blog.csdn.net/weixin_50236973/article/details/135151143

版权

redux 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
    <span id="count">1</span>
    <button id="increment">增加</button>
    <button id="decrement">减小</button>
</body>
<script>
    // 1. 定义reducer函数
    function reducer(state={count: 0}, acticon) {
        if (acticon.type == 'INCREMENT') {
            return {count: state.count + 1}
        } else if (acticon.type == 'DECREMENT') {
            return {count: state.count - 1}
        }
        return state;
    }

    // 2. 使用reducer函数生成store实例
    const store = Redux.createStore(reducer)

    // 3. 通过store实例的subscribe订阅数据变化
    store.subscribe(() => {
        // 每次state发生变化的时候自动执行

        // 5. 更新视图
        document.getElementById('count').innerHTML = store.getState().count;
    })

    // 4. 通过store实例的dispatch函数提交action更改状态
    const inBtn = document.getElementById('increment')
    const dBtn = document.getElementById('decrement')

    inBtn.addEventListener('click', () => {
        // +
        store.dispatch({type: 'INCREMENT'})
    })
    dBtn.addEventListener('click', () => {
        store.dispatch({type: 'DECREMENT'})
    })
</script>
</html>