通惠河边最简单的redux原理入门

本项目为create-react-app 生成

npx create-react-app redux-test
cd redux-test
npm start

01、public 文件夹html中添加dom

#index.html

<div id="root">
    <input type="text" id='numValue'>
</div>
<button id="add">add</button>
<button id="minus">minus</button>

02、src下创建myredux/index.js,并编写核心函数 createStore(订阅发布模式)

#redux.js

function createStore(reducer, initialState = {}) {
    let state = initialState;
    let listeners = []

    function getState() {
        return state
    }

    function subscribe(listener) {
        listeners.push(listener)
        #返回取消订阅
        return () => listeners.splice(listeners.indexOf(listener), 1)
    }

    function dispatch(action) {
        state = reducer(state, action)
        listeners.forEach(listener => listener())
    }

    return {
        getState,
        subscribe,
        dispatch,
    }
}

export default createStore

03、初始化state

#index.js
let initialState = {num: 0}

04、编写state处理函数 reducer

#index.js

function reducer(state = initialState, action) {
    switch (action.type) {
        case 'add':
            return {num: state.num + action.val}
        case 'minus':
            return {num: state.num - action.val}
        default:
            return state
    }
}

05、初始化store包

#index.js

let store = createStore(reducer, initialState);

06、事件绑定

#index.js

const addButton = document.getElementById('add')
const minusButton = document.getElementById('minus')
let render = function () {
    const numValue = document.getElementById('numValue')
    numValue.value = store.getState().num
}
addButton.addEventListener('click', function () {
    store.dispatch({type: 'add', val: 1})
})
minusButton.addEventListener('click', function () {
    store.dispatch({type: 'minus', val: 1})
})

07、初始化渲染及render订阅

#index.js

//初始化渲染
render()
//订阅渲染函数
store.subscribe(render)