手写一个Redux简易版(一)

前言

React技术中，最难理解的好像是Redux，为了让自己对Redux理解比较深刻一点，就写了这一篇文章，用来揭开Redux神秘的面纱。

需要实现功能

• createStore
  • subscribe
  • dispatch
  • getState
  • replaceReducer
• action
• reducer
• combineReducers
• applyMiddleware
• bindActionCreators

具体流程

先抛一个问题：

如何监听一个数据变化,并且可以通知所有的依赖

碰到这个问题是不是想到object.defineproperty和proxy，但是今天我们不打算用这两个我们自己实现一个订阅-分发模式listenter

listenter

//需要监听的值
let data=0;
//所有依赖的对列
let listenters=[];
//收集依赖方法
function subscribe(listener) {
    listenters.push(listener);
}
//用来重写数据的赋值操作，添加通知所有依赖的操作
function changeData(val){
	data=val;
	listenters.forEach((v,i)=>{
        v();
    })
}
//我们主动收集一下需要通知的依赖
subscribe(()=>{
    console.log("监听到数据变化");
})
//改变监听的值
changeData(1)

这个方法的原理，有点类似与vue中的变化侦测(不知道也没关系)，其实就是一个简单的订阅-分发模式，上面的代码其实已经实现了一个Redux…哈哈

createStore

我们优化一下上面的listenter代码

function createStore() {
  let data = 0;
  let listenters = [];
  //还是上面的subscribe
  function subscribe(listener) {
    listenters.push(listener);
  }
    //还是上面的changeData
  function changeData(val) {
    data = val;
    listenters.forEach((v, i) => {
      v();
    });
  }
  return{
    subscribe,
    changeData
  }
}
//执行效果
let store=createStore();
store.subscribe(() => {
    console.log("监听到数据变化");//监听到数据变化
  });
store.changeData(1);

用createStore嵌套一下，这下有没有更清晰一下，我们要是把changeData换成dispatch会不会更像Redux

function createStore() {
  let data = 0;
  let listenters = [];

  function subscribe(listener) {
    listenters.push(listener);
  }

  function dispatch(val) {
    data = val;
    listenters.forEach((v, i) => {
      v();
    });
  }
  return {
    subscribe,
    dispatch,
  };
}

let store = createStore();

store.subscribe(() => {
  console.log("监听到数据变化");
});

store.dispatch(1);//监听到数据变化

有没有对Redux，有点感觉了…我们继续
现在我们监听数据被维护在createStore内，此时我们想要获取监听数据的需求,我们实现一下getState

function createStore() {
  let data = 0;
  let listenters = [];
  function subscribe(listener) {
    listenters.push(listener);
  }
  function dispatch(val) {
    data = val;
    listenters.forEach((v, i) => {
      v();
    });
  }
  function getState(params) {
      return data;
  }
  return {
    subscribe,
    dispatch,
    getState
  };
}
let store = createStore();
store.subscribe(() => {
//   console.log("监听到数据变化");
});
console.log("改变前----"+store.getState());//改变前----0
store.dispatch(1);
console.log("改变后----"+store.getState());//改变后----1

action

我们在React的状态管理和Vue的状态管理中一直在使用这种格式:

{
	type:"TYPE_STUSE"
	value
}

但是这种格式作用是做什么的，我们为什么要这么搞事情…现在来解剖一下
我根据一个场景来讲解：

//状态会自增
setInterval(()=>{
    let count=store.getState();
    count++
    console.log(store.getState());
    store.dispatch(count);
},1000)
//效果
0
1
2
3
4
5
6
7
8
9
10
....

是不很麻烦，这种操作还会出现问题：

console.log(store.getState());//0
setInterval(()=>{
    let count=store.getState();
    count++
    console.log(store.getState());
    store.dispatch(count);
},1000)
store.dispatch("abc");
//效果
0
abc
NaN
NaN
NaN
NaN
NaN
NaN
NaN
NaN
NaN
NaN
NaN
....

在不同的地方赋了一个不是我们期望的值，导致自增操作失效，如何避免这种可以随意变更我们的状态值呢，我们就引入了“计划”这个概念，也就是reducer，不允许计划外的 count 修改，下面我们实现以下reducer

reducer

那我们分两步来解决这个问题

• 制定一个 data 修改计划，告诉 store，我的修改计划是什么。
• 修改 store. dispatch方法，告诉它修改 state 的时候，按照我们的计划修改。

function createStore(reducer) {
  let data = 0;
  let listenters = [];

  function subscribe(listener) {
    listenters.push(listener);
  }
	//修改 store. dispatch方法，告诉它修改 state 的时候，按照我们的计划修改
  function dispatch(action) {
    data = reducer(data,action);
    listenters.forEach((v, i) => {
      v();
    });
  }
  function getState(params) {
      return data;
  }
  return {
    subscribe,
    dispatch,
    getState
  };
}

function reducer(state, action) {
    switch (action.type) {
      case 'INCREMENT':
        return ++state
      default:
        return state;
    }
}
//告诉 store，我的修改计划是什么
let store = createStore(reducer);
store.subscribe(() => {
	//   console.log("监听到数据变化");
});
let action={
	type:"INCREMENT"
}
store.dispatch(action);
console.log(store.getState());//1

到这里为止，我们已经实现了一个有计划的状态管理器，剩余的实现我们在下一篇继续讨论。
完整的demo案例