简介

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 来说，最重要的几个零件有：

1. store （存储 state 和 dispatch actions）
2. action （声明想要如何改变state）
3. 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

学习资料

1. Redux 作者亲写的视频教程
2. React Tutorial
3. Redux Tutorial