react-redux的学习

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