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可以接受函数作为参数。如果是函数，就执行它。