react,taro看的頭暈眼花，慢慢記錄一些吧。今天記錄下react-redux：

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

　　先看這裡，在render渲染方法裡有一個Provider元件。這是react-redux所提供的一個元件。目的是為了能讓容器元件App拿到state.

那麼容器元件是怎麼生成的呢。通過connect方法：

import { Provider, connect } from 'react-redux'
//  傳入上面兩個函式引數，將Counter元件變為App元件
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

　　這裡的App就是容器元件。這裡connect方法裡接收了兩個引數，用來將Counter這個UI元件變為容器元件。

這兩個引數，第一個mapStateToProps負責資料到ui的工作，第二個負責UI到資料的工作。雙向處理，可以理解。

//  將state對映到Counter元件的props
function mapStateToProps(state) {
  return {
    value: state.count
  }
}

//  將action對映到Counter元件的props
function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: () => dispatch(increaseAction)
  }
}

　　這裡App容器元件已經有了，那麼就要建立store了。是用reducer的函式通過createStore()去建立store.

// 根據reducer函式通過createStore()建立store
const store = createStore(counter)

　　這裡接收一個引數。這個引數是一個函式。這個函式是基於舊的state根據action，去返回一個新的state:

// Reducer   基於原有state根據action得到新的state
function counter(state = { count: 0 }, action) {
  const count = state.count
  switch (action.type) {
    case 'increase':
      return { count: count + 1 }
    default:
      return state
  }
}

　　這樣的話，store我們也有了。那麼我們就要建立這裡的引數action了:

// Action  
const increaseAction = { type: 'increase' }

　　在上面的mapDispatchToProps中，有這樣一句程式碼

dispatch(increaseAction)。這裡就是說，當UI資料改變的時候。會發送一個increaseAction.而這個action.他的type是incease。在上面的方法counter中也就有了處理。

那麼我們如何把UI資料改變事件與這一切建立聯絡呢？

// 定義counter元件
class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props
    // const value = this.props.value
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}> +1</button>
      </div>
    )
  }
}

　　可以看到我們在UI元件Counter中。建立了關聯。cont { value, onIncreaseClick } = this.props.

來看下完整的自定義計時器程式碼：

import React, { Component } from 'react'
import PropTypes from 'prop-types'   //型別檢查
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'

// 定義counter元件
class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props
    // const value = this.props.value
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}> +1</button>
      </div>
    )
  }
}
//對Counter元件接受的props進行型別檢查
Counter.propTypes = {
  value: PropTypes.number.isRequired,   //要求數字型別，沒有提供會警告
  onIncreaseClick: PropTypes.func.isRequired //要求函式型別
}

// Action  
const increaseAction = { type: 'increase' }

// Reducer   基於原有state根據action得到新的state
function counter(state = { count: 0 }, action) {
  const count = state.count
  switch (action.type) {
    case 'increase':
      return { count: count + 1 }
    default:
      return state
  }
}

// 根據reducer函式通過createStore()建立store
const store = createStore(counter)

//  將state對映到Counter元件的props
function mapStateToProps(state) {
  return {
    value: state.count
  }
}

//  將action對映到Counter元件的props
function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: () => dispatch(increaseAction)
  }
}

//  傳入上面兩個函式引數，將Counter元件變為App元件
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

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

程式碼來源於：https://www.jianshu.com/p/ad7eddb23d66