react 学习前期用到的插件

prop-types------展示组件的props类型检测：

 import PropTypes from 'prop-types'
 ...
 Link.propTypes = {
   active: PropTypes.bool.isRequired,
   children: PropTypes.node.isRequired,
   onClick: PropTypes.func.isRequired
 }

react-dom------组件渲染：

 import React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'

 let store = createStore(todoApp)

 render(
   <Provider store={store}>
     <App />
   </Provider>,
   document.getElementById('root')
 )

react-redux------全局访问store  和  生成容器组件：

 import { connect } from 'react-redux'
 ...
 const FilterLink = connect(
   mapStateToProps,
   mapDispatchToProps
 )(Link)

redux------组装Reducer 和 生成store：

 //  ./reducers
 import { combineReducers } from 'redux'

 const todoApp = combineReducers({
   todos,
   visibilityFilter
 })

 export default todoApp

 //  index.js
 import { createStore } from 'redux'
 import todoApp from './reducers'

 let store = createStore(todoApp)

redux-thunk  中间件实现异步action：

 import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';

 let store = createStore(
     getW,
     applyMiddleware(thunk)
     )

异步action实际上是在action creator中生成一个函数，这个函数执行后会生成一个action。我们知道，在redux中action从（dispatch）-（reducer）-（return state）-（ store state）的date flow是同步的，但是我们可以调用第三方的中间件（如redux-thunk），在dispacth(action)的时候，由中间件截获action，判断它是不是纯对象。如果是，就直接送到reducer去更新state。如果是函数，就执行它。这个函数我们可以设计为一个异步任务，等异步返回的时候再生成一个纯对象action送到reducer。这就实现了异步操作。

redux-thunk的作用是让dispatch可以接受函数作为参数。如果是函数，就执行它。