Redux基础

Posted 2021-11-07 wanluN1

学习建议

如若您要学习Redux或者在实际项目中使用它，但您缺乏设计模式等相关内容，我建议您去花费一小部分时间去学习它。个人理解，Redux更像是一个订阅者发布者模式的集成工具，提供简介的API。
actionType.js

module.exports={
    ADD_BUG:"bugAdded",
    REMOVE_BUG:"bugRemoved"
};

我们使用redux要实现的功能

自定义state数据结构:
[ { id: 1, description: ‘Bug1’, resolved: false },… ]
我们可以操作state，但我们才做后需要通知某些函数(即自动回调这些函数)
这些函数我们暂且叫他为订阅者吧 。
有多个订阅者，当state改变后，订阅者可以获得最新的state。
这么一听好像挺简单的哦!
这些state存储在哪里呢，我们使用redux提供的createStore()接口，需要传入reducer函数(纯函数:如果您不知道什么是纯函数，可以阅读我写的一篇博客 javascript函数式编程基础)。

知道大概思想后，我想您看以下代码和注释，能够理解redux的基础思想，以及用法的

store.js

const ACTION=require("./actionType");
const {createStore} = require('redux');
let lastId=0;

//store.getState()将会返回state
//store.dispatch(obj) obj会赋给action
//在createStore时,会调用reducer，给到最开始的默认state,redux进行内部的保存，隐藏细节
//之后的每次dispatch 时调用reducer都会由redux将state传入到reducer() state参数
//reducer应该为纯函数(pure function)
function reducer(state=[],action){
    if(action.type===ACTION.ADD_BUG){
        return[
            ...state,
            {
                id:++lastId,
                description:action.payload.description,
                resolved:false
            }
        ]
    }else if(action.type===ACTION.REMOVE_BUG){
        return state.filter(bug=>bug.id!==action.payload.id)
    }
    return state;
}

//创建store
const store=createStore(reducer);
//createStore是一个高阶函数

//订阅到store
//store.dispatch()则会返回一个回调函数，当执行unsubscribe()时，则会取消订阅
//subscribe()传进的那个回调函数，redux将不再记录，从订阅者队列中消失
//例如：当有人(发布者)store.dispatch时，则store则会调用这些回调函数，来通知订阅者
const unsubscribe=store.subscribe(()=>{
    console.log(["State Change:",store.getState()]);
})

console.log(store.getState());//[]
//state = reducer(reduxInnerState,action);
//notify the subscribers
store.dispatch({
    type:ACTION.ADD_BUG,
    payload:{
        description:"Bug1"
    }
});
/*回调打印:
[
  'State Change:',
  [ { id: 1, description: 'Bug1', resolved: false } ]
]
*/
console.log(store.getState());
//[ { id: 1, description: 'Bug1', resolved: false } ]

store.dispatch({
    type:ACTION.REMOVE_BUG,
    payload:{
        id:1
    }
});
/*回调打印:
[ 'State Change:', [] ]
*/

console.log(store.getState());
//[]

console.log("取消订阅");
unsubscribe();//取消订阅
store.dispatch({
    type:ACTION.ADD_BUG,
    payload:{
        description:"Bug1"
    }
});//没有执行回调函数因为已经取消订阅
//可见，subscribe中的回调函数并没有执行，因为订阅者队列中，已经没有这个订阅者


//每次都要手写action对象，太累了吧
//为什么写个工厂函数呢?

//总结:
//Redux更像是一个发布者订阅者模式的库工具
//Redux将State隐藏于其内部，我们无法直接访问，我们只能使用getState方法来获取
//但调用getState()得到的state，是从我们写的reducer纯函数得到的
//所以在reducer中将state进行深拷贝再返回显得非常重要
//export
module.exports.store=store;