从零写redux

从零写redux

let state = {
  count: 0
}

//所有消息的消息队列
let listener = [];

//订阅
function subscribe(fn){
  listener.push(fn);
}

//发布所有消息
function changeCount(count){
  state.count = count
  for(let i = 0 ; i< listener.length ; i++){
    const listen = listener[i];
    listen();
  }
}
//订阅消息
subscribe(()=>{
  console.log(state.count);
})

changeCount(1);
changeCount(2);

/********我隔我隔***上面的只能管理count**将代码封装起来******/

const createStore =function(initial){
  let state = initial;
  let listeners = [];
  //订阅
  function subscribe(fn){
    listeners.push(fn);
  }

  function changeState(payload){
    state = payload;
    for(let i = 0; i<listeners.length; i++){
      const listener = listeners[i];
      listener();
    }  
  }

  function getState(){
    return state;
  }
  return {
    getState,
    changeState,
    subscribe
  }
}


/**
 * 使用这个状态管理管理多个状态
 * 
*/


let initial = {
  number:{
    count:1
  },
  info:{
    name: '小李',
    content:'你的名称'
  }
}

const store = createStore(initial);

store.subscribe(()=>{
   let state = store.getState();
  console.log(state.info);
});

store.subscribe(()=>{
   let state = store.getState();
  console.log(state.number);
});

  store.changeState({
    ...store.getState(),
    info:{
      name: '小王',
      content: '往里走'
    }
  });

store.changeState({
  ...store.getState(),
  number:{
    count: 2
  }
});

/************上面的状况可以对changeState进行随意更改，即count值可以随意更改成字符串等 我们使用一个新函数控制type**********/

function type(state,action){
  switch(action.type){
    case 'ADDCOUNT':
    return {
      ...state,
      count: state.count + 1
    }
    case "DECREASE":
      return {
        ...state,
        count: state.count - 1
      }
    default:
      return state
  }
}

const initialState = {
  count: 0
}

const store1 = createStore1(type,initialState);

store1.subscribe(()=>{
  let state = store1.getState();
  console.log(state.count,"---count");
})

store1.changeState({
  type: 'ADDCOUNT'
})

store1.changeState({
  type: 'DECREASE'
})
// store1.changeState({
//   count: 'abc'
// })
//将type 改成 reducer 将 changeState改成dispatch

/******--------reducer和合并---------------********/ 

//这是一个state
let state3 = {
  number:{
    count: 1
  },
  info:{
    name: '',
    content: ''
  }
}

const createStore2 = function(reducer,initialState){
  let state = initialState;
  let listeners = [];

  function subscribe(fn){
    listeners.push(fn);
  }

  function dispatch(action){
    state = reducer(state,action);
    for(let i =0; i< listeners.length; i++){
      let listener = listeners[i];
      listener();
    }
  }

  function getState(){
    return state
  }

  return {
    subscribe,
    dispatch,
    getState
  }

}


//他们各自的reducer 

function numberReducer(state,action){
  switch(action.type){
    case 'INCREASE':
      return {
        ...state,
        count: state.count + 1
      } 
    case 'DECREASE':
      return {
        ...state,
        count: state.count - 1
      }  
    default:
      return state  
  }
}

function infoReducer(state,action){
  switch(action.type){
    case 'SET_NAME':
      return {
        ...state,
        name: action.name
      }
    case 'SET_CONTENT':
      return {
        ...state,
        name: action.content
      }
    default: 
      return state   
  }
}

//我们用combineReducer来把多个reducer合并成一个

// const reducer = combineReducer({
//   number: numberReducer,
//   info: infoReducer
// });

//实现combineReducer

function combineReducer(reducers){
  let reducerKeys = Object.keys(reducers);
  //返回合并后新的reducer函数
  return function combineFun(state={},action){
    //生成新的reducer
    const nextState = {};
    for(let i = 0; i<reducerKeys.length; i++){
      const key = reducerKeys[i];
      const reducer = reducers[key];//每一个reducer
      //获取之前key的state
      const  prevState = state[key];
      const nextStateForKey = reducer(prevState, action);
      nextState[key] = nextStateForKey;
    } 
    return nextState
  }

}


const reducer = combineReducer({
  number: numberReducer,
  info: infoReducer
})

let initState1 = {
  number:{
    count: 0
  },
  info:{
    name: '',
    content: ''
  }
}

let store2 = createStore2(reducer,initState1);

store2.subscribe(()=>{
  let state = store2.getState();
  console.log(state,"---state----sub");
})
store2.dispatch({
  type: 'INCREASE'
})
store2.dispatch({
  type:'SET_NAME',
  name: '某某人'
})

/**********state拆分合并***将state和reducer写在一起******/ 

let initState3 = {
  count: 0
}

function numberReducer(initState3,action){
  if(!state){
    state =initState3;
  }
  switch(action.type){
    case 'INCREASE':
      return {
        count: state.count + 1
      }
      default:
        return state
  }
}
//修改createStore函数


const createStore3 = function(reducer,initial){
  let state = initial
  let listeners = [];

  function subscribe(fn){
    listeners.push(fn);
  }

  function dispatch(action){
    state = reducer(state,action);
    for(let i =0 ;i<listeners.length; i++){
      let listener = listeners[i];
      listener();
    }
  }

  function getState(){
    return state;
  }
  dispatch({
    type:Symbol()
  })

  return {
    getState,
    dispatch,
    subscribe
  }

}