Introduction to Redux 0x102: counter of Redux chestnuts

Time:2020-10-29

Overview of 0x000

This chapter talks about some chestnuts

0x001 native+reduxrealizationcounter

  • Modify template

    <!doctype html>
    <html>
    <head>
        <title>React Study</title>
    </head>
    <body>
    <div id="app">
        <p id="counter">0</p>
        < button id = "btnadd" > increased < / button >
        < button id = "btnsub" > decrease < / button >
    </div>
    
    </body>
    </html>
  • Modify entry file

    import {createStore} from 'redux'
    
    //Declare two actions
    const ACTION_NUM_INCREMENT = 'ACTION_NUM_INCREMENT'
    const ACTION_NUM_DECREMENT = 'ACTION_NUM_DECREMENT'
    
    //Declare a 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)
    
    //Set up listening, get a new counter when the reducer changes, and update the interface
    store.subscribe(() => {
        document.getElementById('counter').innerText = store.getState()
    })
    
    //Binding events
    document.getElementById('btnAdd').addEventListener('click', () => {
        store.dispatch({type: ACTION_NUM_INCREMENT})
    })
    document.getElementById('btnSub').addEventListener('click', () => {
        store.dispatch({type: ACTION_NUM_DECREMENT})
    })

View browser

Introduction to Redux 0x102: counter of Redux chestnuts

explain:dispatchIt’s actually a request, likestore.dispatch({type: ACTION_NUM_INCREMENT})It was actually aincreaseOf course, this is just a name. How to deal with it depends on ourselves. It is a simple onejsObject, after we make this request,reducerWill receive this request,counterMediumactionThe object is actually the thing you send outswitchAfter processing, will itreducerReturn value as newstateSave it and notify the subscriptionstoreThe place of–subscribeWill be executed.

0x002 useledux

useleduxThe implementation is also very simple, the appeal code only needs these two places

  • ImportLedux

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

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

That’s it

0x003 useMyEventrealization

useMyEventThe implementation cannot reuse existing, but it is also simple

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

//Declare two actions
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
})
//Binding events
document.getElementById('btnAdd').addEventListener('click', () => {
    ++counter
    MyEvent.pub(ACTION_NUM_INCREMENT)
})
document.getElementById('btnSub').addEventListener('click', () => {
    --counter
    MyEvent.pub(ACTION_NUM_DECREMENT)
})

0x004 summary

nothing

0x005 resource

  • Source code

Recommended Today

Regular expression sharing for checking primes

This regular expression is shown as follows: Regular expressions for checking prime numbers or not To use this positive regular expression, you need to convert the natural number into multiple 1 strings. For example, 2 should be written as “11”, 3 should be written as “111”, 17 should be written as “11111111111”. This kind of […]