把react什么的用起来——我不是双向绑定

import React from 'react' 
 
class Login extends React.Component{ 
  render(){ 
    return ( 
      
 
        
早上好，{this.props.username}
 
        
用户名：
 
        
密　码：
 
        登录 
      

为了能让我们写的东西显示出来，得改点模板代码，现在来修改一下src/index.js，里面原来的代码都不需要了，改成：

import React from 'react'; 
import { render } from 'react-dom'; 
import { Provider } from 'react-redux'; 
import configureStore from '../stores'; 
import Login from '../containers/Login'; 
 
const store = configureStore(); 
 
render( 
   
     
  , 
  document.getElementById('app') 
); 

搭建环境时自动打开的浏览器页面还没关吧？保存代码后少等片刻就可以看到我们做的登陆页面了。

目前这个登录组件里问候语里显示的用户名和用户输入的用户名毫无关系，如何将它们联系起来呢？ 既然看到了{this.props.username}你肯定会想到有一个数据模型。的确是有这么个东西，不过在redux里， 这个数据模型很壮观，整个应用只有一个数据模型，所以更应该管它叫数据仓库。这个仓库的代码在stores/index.js里面。 代码很简单，就是用reducers和initialState两个参数来创建一个仓库。看刚才run.js里面的代码， 有个叫Provider的组件使用了仓库，意思很明显：在provider这个组件内部，已经给我们提供好了仓库的访问条件， 也就是说我们的Login组件已经可以访问仓库了。怎么访问呢？需要把我们的组件跟仓库连接起来。 登录组件代码***一行“export default Login”要改成这样：

function mapStateToProps(state) { 
  return {} 
} 
export default connect(mapStateToProps)(Login); 

connect是react-redux这个库提供的函数，功能就是把组件连接到rudux的仓库。注意在文件顶部加上一句“import { connect } from 'react-redux'”。 这里有个函数mapStateToProps，它返回的对象就是从仓库取出的数据，具体的数据等我们写完reducer再补充。

那么reducer是什么呢？

我们考虑一下仓库的数据是要变化的，怎么让它变化呢？我们得给个规则，这个规则描述起来就是： “在发生某一动作（action）时，仓库中的一部分数据要进行相应的变化”。我们管会因动作而变化的这一部分数据叫做状态， 许许多多琐碎的状态组成了仓库数据，所以整个仓库其实就是一个大的状态。在程序运行过程中，我们主要关心的就是这个仓库的状态如何变化。 如何变化？那就要靠reducer。针对一个动作，仓库里会有一个或多个状态发生变化，reducer就是要指导状态如何变化。

等等，那动作是哪来的？从具体上说，动作一般是来源于用户的操作或者网络请求的回应。在代码里需要对动作规范一下， 其实也就是跟reducer进行一个约定，让它知道有动作来了。其实怎样表示动作都可以，只要具有唯一性就行。 一般我们就用字符串就行了，即容易制造唯一，又能够表义，在使用中小心点别重了就行。下面就来定义一个用户输入用户名的动作：

const INPUT_USERNAME = 'INPUT_USERNAME' 

咋不直接用字符串呢？为了避免低级错误，定义了这个常量以后，发起动作时用这个常量，reducer也根据这个常量辨别动作类型。

我们光告诉reducer发生了“用户输入”这个动作还不够，还要告诉reducer用户输入了什么内容。所以完整的动作得是一个具有丰富信息的对象。 为了方便，我们写一个动作生成器，也就是个函数：

function inputUsername (value) { 
  return { 
    type: INPUT_USERNAME, 
    value: value 
  } 
} 

现在reducer就能得到足够的信息来指导状态的变化了。reducer要做的就是把仓库里一个叫做“username”的状态的值修改一下。 由于状态可以是一层套一层的，所以reducer也被设计成可以一层套一层。单个reducer就是它上级reducer的一分子。 其实reducer本身也就是个函数：

function username (state='', action) { 
  switch(action.type){ 
    case INPUT_USERNAME: 
      return action.value 
    defalut: 
      return state 
  } 
} 

reducer的函数名对应着状态名称，函数接受两个参数：***个是当前状态，如果是程序开始运行的时候， 很可能没有当前状态，就给个默认值，这里是空字符串；第二个是前面动作生成器生成的action对象。 一个reducer可以处理多种动作，目前我们只有一个，以后有别的就直接加case分支。对于每种动作， reducer都要返回一个新的状态值，这个值就可以根据action传来的信息按照业务要求生成了。 ***一定要加一个默认情况返回当前状态。在redux里，任何一个action都会在所有的reducer里过一遍， 所以对于一个reducer来说实际上绝大多数情况action都不是它能处理的，***还是返回当前状态值。 觉得很低效吗？😉别怕，只是空走了一遍分支，这对诸如修改DOM这样的重头戏来说根本不算什么。

reducer是一层又一层的树状结构，怎么把它们组合到一起呢？rudex提供了一个组合工具combineReducers。 加入我们已经写好了另一个名为password的reducer，组合它们就是这个样子：

combineReducers({username, password}) 

注意，combineReducers接收的参数是一个对象，而不是多个函数，上面的代码用的是es6的简写方式。

很容易发现，上面的reducer和action生成器都是非常死板的代码，今后我们会写大量的这样的代码， 那会出现满篇样板代码的情形，那可有点蠢笨了。所以我们把重复的东西尽可能的抽取出来，写个reucer生成器以及action生成器的生成器：

// reducer生成器，为了以后使用方便，起名为create reducer的简写 
function cr (initialState, handlers) { 
  return function reducer(state = initialState, action) { 
    if (handlers.hasOwnProperty(action.type)) { 
      return handlers[action.type](state, action); 
    } else { 
      return state; 
    } 
  } 
} 
 
// actiong生成器的生成器，同样原因，起名为create action creator的简写 
return function(...args) { 
  let action = { type } 
  argNames.forEach((arg, index) => { 
    action[argNames[index]] = args[index] 
  }) 
  return action 
} 

这俩函数完成的事情跟我们写样板代码做的事情完全相同。具体说明一下：

cr的两个参数：initialState是初始状态；handlers是由一堆函数组成的对象，每个函数的名称对应着一个action的类型， 每个函数接受的参数与reducer一样，是action和当前状态，返回值会被当做新状态。默认情况就不用我们处理了。

cac接受的***个参数是action的类型名称，后面参数是所有附带数据的属性名称。

好了，把代码规整一下。对现在小小的模拟双向绑定的功能来说，我们还不需要记录密码的状态，不过我们也先写上，后面会用到。

***先写action。因为一般来说，只要你想好了你得应用有什么功能，action就可以写了，而且action不依赖其它东西。

src/actions/login.js：

import {cac} from '../utils' 
 
export const INPUT_USERNAME = 'INPUT_USERNAME' 
export const INPUT_PASSWORD = 'INPUT_PASSWORD' 
 
export const inputUsername = cac(INPUT_USERNAME, 'value') 
export const inputPassword = cac(INPUT_PASSWORD, 'value') 

action类型名称的常量现在都写到了action文件里，不过也许把所有这些常量放到一个单独的文件里比较好， 这样在es6语法的帮助下就可以避免重复了。

这里我们把所有的东西都导出了，action类型名称reducer会用到，action生成器组件会用到。

然后写reducer。当你想好应用的功能后，接下来就是要考虑背后的数据结构了。而reducer一写出来，数据结构就确定了。

src/reucers/login.js:

import {combineReducers} from 'redux'; 
import {cr} from '../utils' 
import {INPUT_USERNAME, INPUT_PASSWORD} from 'actions/login' 
 
export default combineReducers({ 
  username: cr('', { 
    [INPUT_USERNAME](state, {value}){return value} 
  }), 
  password: cr('', { 
    [INPUT_PASSWORD](state, {value}){return value} 
  }) 
}) 

对action文件的引用，路径里没有用../，这样写是因为actions是一个别名，它代表actions目录的绝对路径，这是webpack帮我们做的。 当然你也可以定义自己的别名，修改cfg/base.js就行，比如在resolve.alias对象里加一个自己的工具集：“utils:srcPath + '/utils.js'”。

rducer最终是要注册到store那里的，这个过程在src/storces/index.js里面已经写了， 可以看到里面的代码用的是../reducers这个文件（这是个目录，实际的文件是里面index.js）， 所以我们也需要把新写的reducer注册到这里面去。修改src/reducers/index.js：

import { combineReducers } from 'redux'; 
import login from './login' 
const reducers = { 
  login 
}; 
module.exports = combineReducers(reducers); 

在reducers/index里，所有的reducer也是通过combineReducers组合到一起的，只不过现在我们只有一个孤零零的子reducer：login。

终于，是时候回到组件上来了。src/containers/Login.js现在要修改成这样：

import React from 'react' 
import { connect } from 'react-redux' 
import {inputUsername, inputPassword} from 'actions/login' 
 
class Login extends React.Component{ 
  inputUsernameHandler(evt){ 
    this.props.dispatch(inputUsername(evt.target.value)) 
  } 
  inputPasswordHandler(evt){ 
    this.props.dispatch(inputPassword(evt.target.value)) 
  } 
  render(){ 
    return ( 
      
 
        
早上好，{this.props.username}
 
        
用户名：
 
        
密　码：
 
        登录