简介

React 是JS 的一个库，采用HTML 和 JS 混编的方式编写网页。Redux 是一个状态管理库，不仅可以用在 React，还可以用在其他的JS库。

React 的简单实用

React 将功能编写在每一个 Html Tag 中，这些 Tag 可以是浏览器预设好的，也可以是自定义的。
自定义 React 部件分为有状态部件和无状态部件。

State Component
有状态的控件都具有 state 属性，用来管理控件的状态。state一变，部件就会进行更新。

class FooterLink extends Component {
    render(){
         <h1>a</h1>
    }
}

Stateless Component

// the parameter list is [ props, context  ]
const stateless = ( props, context ) => {
      return (<h1> a</h1>);
}

Redux 的简单使用

Redux 是一个状态管理库。一个App 只有一个统一管理的Store。这个Store 负责存储state，分发action。对与 Redux 来说，最重要的几个零件有：

store （存储 state 和 dispatch actions）
action （声明想要如何改变state）
reducer （以 old state 和action 为条件，产生新的 state）

React-Redux 库

方便React 和 Redux 之间的交互，主要的使用就是 connect 方法。将 props 和方法都映射到部件的属性当中。

const mapStateToProps = (state) => {
    return {
        data : filter_data(state.todos , state.filter)
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        toggle : (id) => {
            dispatch({
                type: 'TOGGLE_ACTION',
                id: id
            });
        }
    }
}
const VisibleTodoList = connect(
    mapStateToProps,
    mapDispatchToProps
    )(TodoList)


export default VisibleTodoList