動(dòng)手實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的redux

xiguadada 發(fā)布于2019-08-22 10:54 / 2202人閱讀

摘要：原文地址的主要集中在函數(shù)返回值中，以下這個(gè)迷你的只簡(jiǎn)單實(shí)現(xiàn)方法，如下測(cè)試代碼運(yùn)行結(jié)果

原文地址：https://github.com/huruji/blog/issues/1

redux的主要API集中在createStore函數(shù)返回值中，以下這個(gè)迷你的redux只簡(jiǎn)單實(shí)現(xiàn)createStore、dispatch、subscribe、getState方法，如下：

const createStore = function(reducer, initialState){
  let currentState = undefined;
  if(initialState) {
    currentState = initialState;
  }
  let currentReducer = reducer;
  let listeners = [];
  return {
    getState() {
      return currentState;
    },
    dispatch(action) {
      if(!currentState){
        currentState = currentReducer(currentState, action);
      }
      currentState = currentReducer(currentState, action);
      listeners.forEach((item) => {
        item();
      });
      return this;
    },
    subscribe(fn) {
      listeners.push(fn);
    }
  }
};

測(cè)試代碼：

let reducer = function(state, action) {
  if(!state) {
    return {counter: 0};
  }
  switch(action.type) {
    case "ADD":
      return {counter: state.counter+1};
    case "DEL":
      return {counter: state.counter-1};
    default:
      return state;
  }
};
let store = createStore(reducer);

store.subscribe(function(){
  console.log("before1")
});
store.subscribe(function() {
  console.log("before2")
});

store.dispatch({
  type:"ADD"
});
console.log(store.getState());
store.dispatch({
  type: "ADD"
});
console.log(store.getState());
store.dispatch({
  type: "DEL"
});
console.log(store.getState());

運(yùn)行結(jié)果：

GPU云服務(wù)器云服務(wù)器 js實(shí)現(xiàn)的簡(jiǎn)單特效最簡(jiǎn)單的算法最簡(jiǎn)單的爬蟲用c實(shí)現(xiàn)簡(jiǎn)單的shell

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/91435.html

相關(guān)文章

寫一本關(guān)于 React.js 的小書

摘要：因?yàn)楣ぷ髦幸恢痹谑褂?，也一直以來想總結(jié)一下自己關(guān)于的一些知識(shí)經(jīng)驗(yàn)。于是把一些想法慢慢整理書寫下來，做成一本開源免費(fèi)專業(yè)簡(jiǎn)單的入門級(jí)別的小書，提供給社區(qū)。本書的后續(xù)可能會(huì)做成視頻版本，敬請(qǐng)期待。本作品采用署名禁止演繹國(guó)際許可協(xié)議進(jìn)行許可 React.js 小書本文作者：胡子大哈本文原文：React.js 小書轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息在線閱讀：http://huzi...

Scorpion 2019-08-21 11:39 評(píng)論0 收藏0
動(dòng)手實(shí)現(xiàn) redux

摘要：動(dòng)手實(shí)現(xiàn)實(shí)現(xiàn)這個(gè)模塊直接創(chuàng)建的函數(shù)考慮到要暴露出去的三個(gè)函數(shù)我們用函數(shù)內(nèi)部的變量來存儲(chǔ)我們的數(shù)據(jù)時(shí)候直接返回當(dāng)前的值就可以了同樣用內(nèi)部變量來存儲(chǔ)訂閱者訂閱者則由函數(shù)添加返回取消訂閱的函數(shù)。則根據(jù)返回新的同時(shí)通知訂閱者執(zhí)行相關(guān)邏輯。文章地址實(shí)例回顧 showImg(https://segmentfault.com/img/bVXtft?w=640&h=320); 假如按鈕和界面不在同...

Barrior 2019-08-21 17:18 評(píng)論0 收藏0
前端空間 - 收藏集 - 掘金

摘要：封裝手寫的方筆記使用檢測(cè)文件前端掘金副標(biāo)題可以做什么以及使用中會(huì)遇到的坑。目的是幫助人們用純中文指南實(shí)現(xiàn)復(fù)選框中多選功能前端掘金作者緝熙簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測(cè)試框架 Chai.js 源碼貢獻(xiàn)者之一，Chai.js 中會(huì)遇到很多異常處理...

you_De 2019-08-29 12:34 評(píng)論0 收藏0
前端空間 - 收藏集 - 掘金

摘要：封裝手寫的方筆記使用檢測(cè)文件前端掘金副標(biāo)題可以做什么以及使用中會(huì)遇到的坑。目的是幫助人們用純中文指南實(shí)現(xiàn)復(fù)選框中多選功能前端掘金作者緝熙簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測(cè)試框架 Chai.js 源碼貢獻(xiàn)者之一，Chai.js 中會(huì)遇到很多異常處理...

lwx12525 2019-08-20 16:35 評(píng)論0 收藏0
面試題目別有洞天 -> 從es6優(yōu)雅解法，到降級(jí)polyfill，再到redux reduce

摘要：每次被執(zhí)行時(shí)，和被傳入，這個(gè)根據(jù)進(jìn)行累加或者是自身消減，英文原意，進(jìn)而返回最新的。之前的一篇文章：從一道面試題，到我可能看了假源碼討論了bind方法的各種進(jìn)階Pollyfill，今天再分享一個(gè)有意思的題目。從解這道題目出發(fā)，我會(huì)談到數(shù)組的Reduce方法，ES6特性和Redux數(shù)據(jù)流框架中Reducer的命名等等。一道典型的題目，卻如唐代詩(shī)人章碣《對(duì)月》詩(shī)中所云：別有洞天三十六，水...

econi 2019-08-21 11:33 評(píng)論0 收藏0