React全家桶之Redux（三）

        只要你的智商正常，稍微认真学的话，我相信react + react-router 应该三天就可以学好了，但是Redux的话.....真的不能保证你能花多久时间学会，只能看你的理解能力如何了。

       

       在准备学Redux之前，首先要知道一件事情，就是React 本身只涉及UI层，如果搭建大型应用，必须搭配一个前端框架。也就是说，你至少要学两样东西，才能基本满足需要：React + 前端框架。

    Facebook官方使用的是 Flux 框架，使用 Flux 组织代码和安排内部逻辑，使得你的应用更易于开发和维护。当然这里你一定又是一头雾水。这里我得先说一下，当时我只是看了一下flux的思想和用处，并没有花更多的时间去专门学习它，因为我看到了Redux，而大部分的React项目都用Redux代替了Flex，所以我把很多的时间都用在去学Redux上了，但是我们也应该了解一下Flex，请看阮一峰的这篇文章：http://www.ruanyifeng.com/blog/2016/01/flux.html。

     Flex并不准备多讲，直接说Redux，Redux是什么？为什么要用Redux？网上有很多文章介绍，但是看之前，首先明确一点：Redux 是一个有用的架构，但不是非用不可。事实上，大多数情况，你可以不用它，只用 React 就够了。

      曾经有人说过这样一句话。

      "如果你不知道是否需要 Redux，那就是不需要它。"
      Redux 的创造者 Dan Abramov 又补充了一句。
      "只有遇到 React 实在解决不了的问题，你才需要 Redux 。"
      简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。
      1，用户的使用方式非常简单
      2，用户之间没有协作
      3，不需要与服务器大量交互，也没有使用 WebSocket
      4，视图层（View）只从单一来源获取数据
      5，上面这些情况，都不需要使用 Redux。
      6，用户的使用方式复杂
      7，不同身份的用户有不同的使用方式（比如普通用户和管理员）
      8，多个用户之间可以协作
      9，与服务器大量交互，或者使用了WebSocket
      10，View要从多个来源获取数据
     上面这些情况才是 Redux 的适用场景：多交互、多数据源。
     从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。
     某个组件的状态，需要共享
     某个状态需要在任何地方都可以拿到
     一个组件需要改变全局状态
     一个组件需要改变另一个组件的状态
     发生上面情况时，如果不使用 Redux 或者其他状态管理工具，不按照一定规律处理状态的读写，代码很快就会变成一团乱麻。你需要一种机制，可以在同一个地方查询状态、改变状态、传播状态的变化。
总之，不要把 Redux 当作万灵丹，如果你的应用没那么复杂，就没必要用它。另一方面，Redux 只是 Web 架构的一种解决方案，也可以选择其他方案。

     清楚了上面这段话后，你可以选择不去学.....不开玩笑了，既然都到这里了，那肯定要学下去了。

     Redux中文网：http://www.redux.org.cn/index.htmlhttp://www.redux.org.cn/index.html

     我建议你先学1~4，最后学到Redux的异步数据流就可以了，事实上，从1~4的4节里面，概念会非常多，你可能会遇到巨大的阻力，可能会让你抓狂，可能会让你怀疑人生。state？action？store？reducer？这些都是什么鬼玩意儿？当你有这些负面情绪的时候，一定要回过头去再看看第2节的介绍部分，把那些字一个个记在心里。特别要记住Redux的三大原则：单一数据源，state只读，改变state只能用action去修改。

      我的理解为：Reudx就是把React管理为一个可预测的状态机，所谓的状态机就是所有view层的改变只能通过改变状态（state）去改变的这样一个机制，所以一开始最重要的事情就是设计好state的结构树！这个真的非常重要，特别是重构的时候，就是最先开刀的。

      Redux的流程可以看以下这张图：

     

      可以这样理解：由Redux管理下，所有的操作行为都应该通过action去触发（dispatch）一个reducer，从而来改变由store管理的唯一的state树，而当state发生变化的时候，由于Redux会轮询检测到state的变化，然后会把效果渲染到视图层（view层），这就是一个完整的流程。然后你在视图层做的所有操作，都是这样的一个流程。

     理解了没有？当然，你可能似懂非懂了。但是我相信你在实际写代码的过程中一定还是会一脸懵逼，比如像我一开始一样，可能会遇到这些困惑：reducer到底该怎么写？如何设计？放在哪里？什么时候调用？....当你意识到如何设计reduce才是令你最头痛的事的时候，你就离理解Redux更近一步了，因为你大部分的工作都应该是如何更好的设计出精妙，可重复使用的reducer。

     这里我推荐一下一个第三方的插件redux-react，这个插件是redux作者自己封装的一个react专用的库，这个库是可以选用的。实际项目中，你应该权衡一下，是直接使用 Redux，还是使用 redux-react。后者虽然提供了便利，但是需要掌握额外的 API，并且要遵守它的组件拆分规范。具体介绍的文章最后会放出。

     如果你能将Redux应用到react中，并且对它的整个流程都了如指掌，并且能设计出不错Reducers，并且意识到如何设计好state才是最重要的时候，那么恭喜你，你对Redux的理解终于迈出了重要的一步，然而你只是揭开了React那巨大面纱中的小小一角，还有很多未知的东西等着你去探索。

     推荐阮一峰的Redux介绍：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

     建议你看完Redux中文文档的1~4节后，并且能有一定了解后再去看，相信会有更加深刻的理解，最后想说一句，学React并不难，但是Redux会让学习难度直线上升，千万不要想着一口气能吃成一个胖子，即使花了一个礼拜才搞懂也是正常的（比如我），最重要的当然时是不要气馁！