比较redux和reflux以及自己写个TinyFlux?-H5教程-PHP中文網

回复内容：

首頁

web前端

H5教程

比较redux和reflux以及自己写个TinyFlux?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 am 08:44 AM

redux store view

看了redux和reflux，感觉redux好复杂啊，看reflux，1个小时就能弄懂，可是看redux，1天下来都迷迷糊糊的。

感觉flux不就应该是view层发消息给store，store根据消息去修改数据，修改完数据后通知涉及到被修改的view组建刷新state吗。。。

然后我看着reflux的使用方式（它的源代码没怎么看，感觉还是多了），自己写了个tinyFlux。。。二楼附上。。各位看看。。。。可能还太幼稚了。。。欢迎批评啊。。。

回复内容：

谢邀，Flux 相关的轮子已经太多了，实在看不过来，抱歉。

简单说说 Reflux 和 Redux 的区别吧。

之前我在如何理解 Facebook 的 flux 应用架构？ - 知乎用户的回答里提到过，目前市面上很多 Flux 相关的框架就是把 Dispatcher 隐藏了，然后封装了 Action Creator 和 Component 绑定的细节，简单地说就是「简化 Flux 里冗余的代码和操作」。

Reflux 在实现上面说到的内容的基础上，又提供了很多开发者喜欢的功能，比如 View 监听 Action 这种违背 Flux 概念但是确实在实际应用中很方便的特性。

而 Redux 并不仅仅是「简化 Flux」，它重新定义了 Flux 中每一个角色的功能、职责及实现方式。其中最大的不同是没有 Store 的概念（或者说 Store 不再需要用户去定义），而增加了 Reducer 的概念。Store 会通过我们定义的 Reducer 自动生成，使用 redux.createStore 方法。此外，Redux 定义了一个 middleware 机制，可以让我们在 Action 中更方便的处理业务逻辑。

总结一下就是，如果你觉得目前 Flux 用着不爽太多冗余代码，那么你写的 TinyFlux 很不错，解决了你的很多问题；然而如果你想拥有更多 redux 带来的新特性，或者说你喜欢并推崇不可变的数据结构，或者说你想显得逼格比较高，那么看懂并会用 redux 绝对是你的不二选择。

PS. redux 确实不错，我们已经开始着手在生产环境中使用了。 Redux 核心概念深入浅出Redux http://www.w3ctech.com/topic/1561

<span class="c1">//TinyFlux.js</span>
<span class="kd">function</span> <span class="nx">createStore</span> <span class="p">(</span><span class="nx">store</span><span class="p">,</span> <span class="p">...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">store</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">'请定义store'</span><span class="p">);</span>
  <span class="p">};</span>
  <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">store</span><span class="p">.</span><span class="nx">init</span> <span class="o">===</span> <span class="s1">'function'</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">store</span><span class="p">.</span><span class="nx">init</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span>
  <span class="p">};</span>
  <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">store</span><span class="p">.</span><span class="nx">actions</span> <span class="o">!==</span> <span class="s1">'function'</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">'actions应该是一个返回一个对象的function，对象里的方法都要用箭头表达式来书写，利用箭头表达式的this绑定。'</span><span class="p">);</span>
  <span class="p">};</span>
  <span class="nx">store</span><span class="p">.</span><span class="nx">actions</span> <span class="o">=</span> <span class="nx">store</span><span class="p">.</span><span class="nx">actions</span><span class="p">();</span>
  <span class="k">if</span> <span class="p">(</span><span class="nx">store</span><span class="p">.</span><span class="nx">subscriber</span> <span class="o">||</span> <span class="nx">store</span><span class="p">.</span><span class="nx">emit</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">'不该存在subscriber和emit'</span><span class="p">);</span>
  <span class="p">};</span>
  <span class="nx">store</span><span class="p">.</span><span class="nx">subscriber</span> <span class="o">=</span> <span class="p">[];</span>
  <span class="nx">store</span><span class="p">.</span><span class="nx">emit</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">argument</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">store</span><span class="p">.</span><span class="nx">subscriber</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">component</span> <span class="o">=></span> <span class="nx">component</span><span class="p">.</span><span class="nx">reload</span><span class="p">());</span>
  <span class="p">};</span>
  <span class="k">return</span> <span class="nx">store</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">connect</span> <span class="p">(</span><span class="nx">store</span><span class="p">,</span> <span class="nx">def</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="p">{</span>
      <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="kd">var</span> <span class="nx">state</span> <span class="o">=</span> <span class="p">{};</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="k">in</span> <span class="nx">def</span><span class="p">)</span> <span class="p">{</span>
          <span class="k">try</span><span class="p">{</span>
            <span class="nx">state</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nb">eval</span><span class="p">(</span><span class="s1">'store.'</span><span class="o">+</span><span class="nx">def</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
          <span class="p">}</span> <span class="k">catch</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
          <span class="p">}</span>
        <span class="p">};</span>
        <span class="k">return</span> <span class="nx">state</span><span class="p">;</span>
      <span class="p">},</span>
      <span class="nx">reload</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">state</span> <span class="o">=</span> <span class="p">{};</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="k">in</span> <span class="nx">def</span><span class="p">)</span> <span class="p">{</span>
          <span class="k">try</span><span class="p">{</span>
            <span class="nx">state</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nb">eval</span><span class="p">(</span><span class="s1">'store.'</span><span class="o">+</span><span class="nx">def</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
          <span class="p">}</span> <span class="k">catch</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span>
          <span class="p">}</span>
        <span class="p">};</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">state</span><span class="p">);</span>
      <span class="p">},</span>
      <span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="nx">store</span><span class="p">.</span><span class="nx">subscriber</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
      <span class="p">},</span>
      <span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">store</span><span class="p">.</span><span class="nx">subscriber</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">store</span><span class="p">.</span><span class="nx">subscriber</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="k">this</span><span class="p">),</span><span class="mi">1</span><span class="p">);</span>
      <span class="p">}</span>
  <span class="p">};</span>
<span class="p">}</span>

<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span>
  <span class="nx">createStore</span><span class="o">:</span> <span class="nx">createStore</span><span class="p">,</span>
  <span class="nx">connect</span><span class="o">:</span> <span class="nx">connect</span>
<span class="p">}</span>
登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1422

Laravel 教程

1316

PHP教程

1267

C# 教程

1239

Related knowledge

Laravel開發：如何使用Laravel View產生視圖？ Jun 14, 2023 pm 03:28 PM

Laravel是目前最受歡迎的PHP框架之一，其強大的視圖生成能力是令人印象深刻的一點。視圖是Web應用程式中展示給使用者的頁面或視覺元素，其中包含HTML、CSS和JavaScript等程式碼。 LaravelView允許開發者使用結構化的模板語言來建立網頁，同時透過控制器和路由產生相應的視圖。在本文中，我們將探討如何使用LaravelView產生視圖。一、什

$微軟商店打不開顯示\'很抱歉！出錯了，但我們做對了\'-【詳細解決方法】$ 微軟商店打不開顯示\'很抱歉！出錯了，但我們做對了\'-【詳細解決方法】 Mar 27, 2024 pm 01:21 PM

有用戶想要在微軟商店尋找自己喜歡的應用程式並下載安裝，但是發現微軟商店打不開了，同時還提示"很抱歉！出錯了，但我們做對了"，那麼我們應該如何解決，才能讓微軟商店恢復正常運作並使用呢？下面小編整理了兩種方法，希望可以很好的幫助你！方法一可以按Win+R→輸入cmd然後按住ctrl+shift→點選確定（彈出UAC後點選是）然後彈出cmd視窗（管理員模式）然後複製貼上以下內容：netshwinsockresetnetshintipresetipconfig/releaseipconfig/renewi

React Redux教學：如何使用Redux管理前端狀態 Sep 26, 2023 am 11:33 AM

ReactRedux教學：如何使用Redux管理前端狀態React是一個非常受歡迎的JavaScript庫，用於建立使用者介面。而Redux是一種用於管理應用程式狀態的JavaScript庫。它們結合起來可以幫助我們更好地管理前端狀態。本文將介紹如何使用Redux在React應用程式中管理狀態，並提供具體的程式碼範例。一、安裝和設定Redux首先，我們需要安裝Re

一文詳解Redux Hooks的使用細節 Nov 11, 2022 pm 06:24 PM

這篇文章帶大家聊聊Redux Hooks的使用細節，希望對大家有幫助！

使用Go語言和Redux建立可擴展的網路應用的最佳實踐 Jun 18, 2023 pm 01:59 PM

隨著Web應用不斷發展，越來越多的企業開始從傳統的後端渲染轉向前端渲染。為了實現這一目標，許多企業在Web應用中採用了Go語言和Redux。在這篇文章中，我們將討論如何使用這兩種技術建立可擴展的Web應用的最佳實踐。熟悉Go語言Go語言是一種開源程式語言，由Google公司開發。它具有簡潔、高效、安全的特點，可用於建立高並發的網路應用。在使用Go語言構建

Java怎麼使用反射和動態代理實作一個View註解綁定函式庫 Apr 30, 2023 pm 05:34 PM

使用反射結合動態代理實作一個View註解綁定函式庫，支援View和事件綁定，程式碼簡潔，使用簡單，擴充性強。支援的功能@ContentView綁定layout替代setContentView()@BindView綁定View替代findViewById()@OnClick綁定點擊事件替代setOnClickListener()@OnLongClick綁定長按事件替代setOnLongClickListener()代碼註解類別@Target(ElementType. TYPE)@Retention(Rete

vue3 vuex4 store的響應式值問題怎麼解決 May 29, 2023 pm 06:55 PM

場景：在頁面中點選按鈕，數量增加，數值是存在store的，點選事件，數值沒變。 import{useStore}from'@/vuex';conststore=useStore()constonSubmit=()=>{store.dispatch("incrementAction",1);}letcount=store.state.count{{count}}原因：store .state.count錯誤的取值方式，雖然可以取出，但是喪失了回應

如何利用React和Redux實現複雜的前端資料管理 Sep 26, 2023 am 09:30 AM

如何利用React和Redux實現複雜的前端資料管理前言：隨著前端技術的不斷發展，前端應用越來越複雜，資料管理變得愈發重要。 React和Redux是目前較為流行的前端框架，它們能夠有效地幫助我們管理和更新資料。本文將介紹如何利用React和Redux實現複雜的前端資料管理，並提供具體的程式碼範例。一、React簡介React是用來建立使用者介面的JavaSc

See all articles

比较redux和reflux以及自己写个TinyFlux?

回复内容：

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題