学习建议

如若您要学习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;