初识generator

generator是ES6的新特性，也是一种异步编程的解决方案。generator函数通过function*()来表示，它相当于一个状态机，在内部通过yield来标识每一个状态。generator函数的返回值是一个指向内部状态的指针，我们将它命名为指针g。

在generator函数内部，凡是遇到yield标记的语句都会被阻塞。它们的控制权完全交给指针g，当指针g执行next时，相当于恢复generator的执行，相应的，next操作会返回一个包含value和done的对象。若当前generator执行完成，也就是之后没有yield语句了，value返回undefind，done返回true，告诉next执行完成。如果后面会被阻塞，则done返回false，value则为yield后面语句的值。next可被传入值，所传入的值将作为yield的返回值。具体执行流程可见下图:

注意一种特殊情况: 当generator函数内部有return时，返回{ value: return值, done: true }，结束generator的执行。

From the very beginning, we need to stress that Redux has no relation to React. You can write Redux apps with React, Angular, Ember, jQuery, or vanilla JavaScript.

我们经常将redux与react两者放在一起谈论，但实际上Redux与React并没有直接关联，也没有相互依赖的。Redux本质上是一个状态容器，给予开发者维护状态的能力，而这恰恰是React的薄弱环节。

在仅有React的开发中，我们不得不将组件的状态存入state中，子组件需要通过父组件给予的回调函数修改父组件的state，父组件需要把状态通过props传递给子组件。两个组件间需要通信(也可以理解为两个组件需要相互修改状态)，就需要将state存储在他们共有的父组件中。随着应用越来越复杂，父组件的state越来越大，传给子组件的props也越来越复杂(即包含数据, 又有回调函数)。

此时Redux出现了，Redux单一数据流的思想和react是不谋而合的。我们可以将整个父组件的state放入Redux的store中进行维护。但我们在本文开头提到过，Redux与React之间是没有关联的，那么如何将Redux与React串联起来呢? 我们使用了react-redux。

现在是北京时间2016年7月9日凌晨3点18分。不得不感叹时间过得非常快，这个博客创建居然快一年了，而没有更博客也有两个月多了。终于下定决心把博客换成了Hexo+Next的清新款，经过一晚上的努力，顺利地完成了搭建与迁移。

博客，我赋予了新的名字 - “Reducer”，可能是最近Redux开发多了的缘故吧，有点中毒，哈哈，开个玩笑~~

“Reducer” 蕴含有归约、归纳的含义，它也彰显了我换博客的原因所在。接下来，我希望能更加专注于博客内容本身，将更多的时间用于技术的思考与归纳总结。老博客虽然完全由我打造，极具个性化，但还有非常多的地方需要去改进与优化。现阶段，我的业余精力是比较有限，应该更加专注与高效，而Hexo+Next主题简约的风格和快速部署与写作的能力吸引了我，毫不犹豫的选择。

给老博客留张截图吧，更换并不意味着完全废弃，我依然会抽空继续开发和完善，期待重出江湖!

本文主要根据阮一峰老师的webpack-demos进行一些提炼。Webpack作为目前作为火热的前端构建工具，redux的官方示例中也使用到了webpack-dev-middleware、webpack-hot-middleware等，便想再次总结学习一下。

入口与出口文件

entry为入口文件，output为出口文件，通过webpack的处理，当前目录下的main.js会转变为bundle.js。

1
2
3
4
5
6
7

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

本文主要对于redux官方文档中的async示例结合一些源码做出一些理解。

此示例通过<select>选择相应的value(reactjs与frontend)作为selectedReddit，向Reddit API请求相应的json数据，获取数据后渲染到列表中。主要采用了react-thunk作为middleware来实现。

首先，再来看一下createStore的定义，第三个参数applyMiddleware相应的中间件，这里thunkMiddleware主要是用来异步控制的，后面会再次讲解

1
2
3
4
5
6

// createStore(reducer, initialState, enhancer)
const store = createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunkMiddleware, createLogger())
)

提到跨域，首先我们不得不提同源策略，同源即相同域名、相同端口、相同协议，违背同源策略即为跨域。当然在实际开发中，我们难免会遇到跨域的问题，这里我们就来总结一下常见的跨域解决方案。

jsonp

jsonp是最为常见的跨域解决方案，动态添加script标签，script标签中的src属性没有跨域的限制，获取跨域服务器上的js脚本文件，在该脚本文件中定义一个callback，将希望获取跨域服务器中的数据存放在callback当中。

下面我们就来模拟一下这个过程。首先打开本地的apache(http://127.0.0.1:8080/test/)模拟跨域服务器，然后利用node的http-server(http://10.66.199.28:8081)模拟本地服务器。

客户端，首先需要先声明callback函数test，然后请求跨域服务器: