Redux入门0x102: redux 栗子之 counter

2019年9月20日 173次阅读 来源: followWinter

0x000 概述

这一章讲一些栗子

0x001 原生+redux实现counter

  • 修改模板

    <!doctype html>
<html>
<head>
    <title>React Study</title>
</head>
<body>
<div id="app">
    <p id="counter">0</p>
    <button id="btnAdd">增加</button>
    <button id="btnSub">减少</button>
</div>

</body>
</html>

  • 修改入口文件

    import {createStore} from 'redux'

// 声明两个 action
const ACTION_NUM_INCREMENT = 'ACTION_NUM_INCREMENT'
const ACTION_NUM_DECREMENT = 'ACTION_NUM_DECREMENT'

// 声明一个 reducer
const counter = (state = 0, action) => {
    switch (action.type) {
        case ACTION_NUM_INCREMENT: {
            return ++state
        }
        case ACTION_NUM_DECREMENT: {
            return --state
        }
        default : {
            return state
        }
    }
}

let store = createStore(counter)

// 设置监听, 当 reducer 发生改变的时候获取新的 counter, 并更新界面
store.subscribe(() => {
    document.getElementById('counter').innerText = store.getState()
})

// 绑定事件
document.getElementById('btnAdd').addEventListener('click', () => {
    store.dispatch({type: ACTION_NUM_INCREMENT})
})
document.getElementById('btnSub').addEventListener('click', () => {
    store.dispatch({type: ACTION_NUM_DECREMENT})
})

查看浏览器

《Redux入门0x102: redux 栗子之 counter》

说明：dispatch其实就是发出一个请求，比如store.dispatch({type: ACTION_NUM_INCREMENT})发出的其实是一个增加的请求，当然这个只是一个名字而已，如何处理还看我们自己，是一个简单的js对象，我们发出这个请求以后，reducer将会受到这个请求，counter中的action对象其实就是你发出的这个东西，经过switch处理以后，将会吧reducer返回值作为新的state保存起来，并通知订阅了store的地方–subscribe的回调函数将会执行。

0x002 使用ledux

使用ledux实现也很简单上诉的代码只需要该两个地方就行了

  • 导入Ledux

    import Ledux from "../../0x101-hello-redux/src/ledux";

  • 修改createStore为Ledux.createStore

    //redux
// let store = createStore(counter)
//ledux
let store = Ledux.createStore(counter)

这样就行了

0x003 使用MyEvent实现

使用MyEvent实现无法复用现有的，但是也很简单

import MyEvent from "../../0x012-component-communication/src/MyEvent";

// 声明两个 action
const ACTION_NUM_INCREMENT = 'ACTION_NUM_INCREMENT'
const ACTION_NUM_DECREMENT = 'ACTION_NUM_DECREMENT'

let counter = 0
MyEvent.sub(ACTION_NUM_INCREMENT, () => {
    document.getElementById('counter').innerText = counter
})
MyEvent.sub(ACTION_NUM_DECREMENT, () => {
    document.getElementById('counter').innerText = counter
})
// 绑定事件
document.getElementById('btnAdd').addEventListener('click', () => {
    ++counter
    MyEvent.pub(ACTION_NUM_INCREMENT)
})
document.getElementById('btnSub').addEventListener('click', () => {
    --counter
    MyEvent.pub(ACTION_NUM_DECREMENT)
})

0x004 总结

无

0x005 资源

    原文作者：followWinter
    原文地址: https://segmentfault.com/a/1190000016255904
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞