851939978-55dfece9d39af_articlex.jpg

一个小demo介绍redux的实现原理,原则:1、保持一个state 2、外部无法直接对其进行操作 3、通过纯函数的方式更改状态 4、返回状态为新的state,除非state没有变化


直接上代码:

'use strict';
let state = {
    aaa : {name :'dora'},
    bbb : {group :'javascript'},
    ccc : {age : 29}
};

function update(updaters,state){

    let newState = {};
    const keys = Object.keys(updaters);
    keys.forEach(key=>{
        let updater = updaters[key]  // updater pure function
        let value = state[key];

        let newSubState = updater(value);

        newState[key] = newSubState;
    })

    let result = Object.assign({},state,newState);
    console.log(result);
}

function aaaUpdater(subState){
    return {
        name : 'doramart'
    }
}

function bbbUpdater(subState){
    return {
        group : 'nodejs'
    }
}

update({
    aaa : aaaUpdater,
    bbb : bbbUpdater
},state);


通过输出结果可以看到,我们通过纯函数的形式修改了state 


redux基本原理.jpg