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

首頁

web前端

H5教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 am 08:44 AM

reduxstoreview

看了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

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

使用Go语言和Redux构建可扩展的Web应用的最佳实践Jun 18, 2023 pm 01:59 PM

随着Web应用不断发展，越来越多的企业开始从传统的后端渲染转向前端渲染。为了实现这一目标，许多企业在Web应用中采用了Go语言和Redux。在这篇文章中，我们将讨论如何使用这两种技术构建可扩展的Web应用的最佳实践。熟悉Go语言Go语言是一种开源编程语言，由Google公司开发。它具有简洁、高效、安全的特点，可以用于构建高并发的Web应用。在使用Go语言构建

一文详解Redux Hooks的使用细节Nov 11, 2022 pm 06:24 PM

本篇文章带大家聊聊Redux Hooks的使用细节，希望对大家有所帮助！

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错误的取值方式，虽然可以取出，但是丧失了响应

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

如何利用React和Redux实现复杂的前端数据管理Sep 26, 2023 am 09:30 AM

如何利用React和Redux实现复杂的前端数据管理前言：随着前端技术的不断发展，前端应用越来越复杂，数据管理变得愈发重要。React和Redux是目前较为流行的前端框架，它们能够有效地帮助我们管理和更新数据。本文将介绍如何利用React和Redux实现复杂的前端数据管理，并提供具体的代码示例。一、React简介React是一个用于构建用户界面的JavaSc

See all articles