其实很早就已经接触react了，当时还看的是es5语法，本来js基础就不扎实，秉着初生牛犊不怕虎的精神去看了react，结果看了云里雾里，这种硬塞的知识过几天就全忘了，过了一段时间，想着有空了，就又去看了react，这次直接看的es6语法，看完后顺道看了react-redux，刚开始，很痛苦，本来react就已经不太容易理解了，再加上redux和react-redux，更加懵逼了，一个很简单的应用还要分成action、reducer、UI组件、container组件，然后分别串联工作，就感觉脑袋要炸了，但是跟着阮大神写了第一个demo。
先看文件目录，我没有想demo里那样全写在一个文件里，分类可以帮助更好的理解。
1.加减计数器：先定义用户有两种操作，一种是加，一种是减，也就是action有两种。
export const increaseAction = { type: 'increase' } export const decreaseAction = { type: 'decrease' } 注意，action的type是必须的，明文规定必须要 。2.然后是reducer，reducer是收到action，然后计算得出新的state，以便让UI组件渲染新的状态，因为每个state对应不同的view。
const setCounter = (state = {count: 0}, action) => { switch (action.type) { case 'increase': return {count: state.count + 1}; case 'decrease': return {count: state.count - 1} default: return state; } } export default setCounter;reducer对action的加减操作都进行了判断处理，然后返回新的state。3.然后是UI组件，就是view部分。
import React, {PropTypes} from 'react'; class Counter extends React.Component { render() { const {value, onIncreaseClick,onDecreaseClick} = this.props, btnStyle = { width: '110px', height: '30px', color: '#fff', backgroundColor: 'green', border: '1px solid green', borderRadius: '5px', cursor: 'pointer' }, textStyle = { fontSize: '20px' }; return ( <div> <span style={textStyle}>{value}</span> <br /> <button style={btnStyle} type="button" onClick={onIncreaseClick}>Increase</button> <button style={btnStyle} type="button" onClick={onDecreaseClick}>Decrease</button> </div> ) } } Counter.propTypes = { value : PropTypes.number.isRequired, onIncreaseClick: PropTypes.func.isRequired, onDecreaseClick: PropTypes.func.isRequired } export default Counter; 这里UI组件接收了来自父组件的props，onIncreaseClick,onDecreaseClick是两个按钮事件，用户点击触发事件然后传递action，到container接收action。
4.container接收action，通过dispatch将action传递给store。
import {connect} from 'react-redux'; import Counter from '../components/Counter'; import {increaseAction, decreaseAction} from '../action/index'; const mapStateToProps = (state) => ({ value: state.count }) const mapDispatchToProps = (dispatch) => ({ onIncreaseClick: () => dispatch(increaseAction), onDecreaseClick: () => dispatch(decreaseAction) }) const App = connect( mapStateToProps, mapDispatchToProps )(Counter) export default App;这里调用了react-redux的connect方法，用于将UI组件生成容器组件，其实就是将两者connect连接在一起，connect需要接受两个参数，mapStateToProps和mapDIspatchToProps。
mapStateToProps方法是讲state转成props传给UI组件，mapDIspatchToProps是UI组件参数到store.dispatch的映射，就是接收UI组件传入的action，最后的Counter就是UI组件。
5.最后是store的生成场所。
import React from 'react'; import ReactDOM from 'react-dom'; import {Provider} from 'react-redux' import {createStore} from 'redux'; import reducer from './reducer/index'; import App from './container/App'; const store = createStore(reducer); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('app') );这边createStore(reducer)将reducer传入，这样在action通过dispatch传入store的时候会通过reducer处理action，从而生成相应的新的state，再让UI组件重新渲染。
以上就是我第一个小demo，记录我学习的脚步，有问题欢迎dalao们指出，请多关照。
