// 我们知道 createStore 返回三个函数 { subscribe, dispatch, getState }。
// 并且需要传入一个reducers
function reducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
const createStore = (reducer) => {
let currentState; // state
let observers = [] // 观察者队列
// 直接返回当前状态
// https://github.com/reduxjs/redux/blob/master/src/createStore.ts#L125
function getState() {
return currentState
}
// 触发reducers内的方法，更改 state
// https://github.com/reduxjs/redux/blob/master/src/createStore.ts#L246
function dispatch(action) {
currentState = reducer(currentState, action)
observers.forEach(fn => fn())
}
// subscribe 将传入的回调加入观察者队列，触发dispatch的时候会触发所有回调
// https://github.com/reduxjs/redux/blob/master/src/createStore.ts#L160
// redux 使用了 proposal-observable 这个库的观察者模式
// 地址:https://github.com/tc39/proposal-observable
function subscribe(cb) {
observers.push(cb)
}
// https://github.com/reduxjs/redux/blob/master/src/createStore.ts#L341
// 初始化store数据
dispatch({type:'INIT_SATATE'})
return { getState, dispatch, subscribe }
}
export const store = createStore(reducer)
store.subscribe(()=>{
console.log(store.getState())
})
手写一个redux
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 简介：简单实现react-redux基础api react-redux api回顾 把store放在context...
- 本周在阅读redux源码时，发现一个文章，由简至深，甚好，原文地址在这里，学习一下。 但是本篇内容并不是介绍red...
- 前言 记得开始接触 react 技术栈的时候，最难理解的地方就是 redux。全是新名词：reducer、stor...
- 搭建一个React-redux-router + antd项目（一）初始化项目搭建一个React-redux-ro...
