一文了解react-redux

1.react-redux是谁出品的？

react-redux是react团队出品的，区别于redux，在react项目中直接使用react-redux更加方便。它提供了两个基本概念：容器组件和UI组件，其中容器组件是包裹UI组件的，二者是父子关系，又因为React的单向数据流原则，父子之间的消息传递就可以使用props。

2.模型图

容器组件相当于一个桥梁，用于连接UI组件和redux 

 模型图解释：

1. 所有的UI组件都应该包裹一个容器组件，他们是父子关系，通过props传递参数
2. 容器组件时真正和redux通信的，在容器组件内可以随意调用redux的API
3. 在UI组件中不能直接使用任何redux的API
4. 容器组件会给UI组件传递，均通过props传递：
   1. redux中所保存的状态-->mapStateToProps
   2. 用于操作状态的方法-->mapDispatchToProps

---

3.完整版代码演示

 UI组件

import React, { Component } from 'react'
export default class Count extends Component {
    increment = () => {
        const { value } = this.selectedValue
        this.props.increment(value * 1)
    }
    decrement = () => {
        const { value } = this.selectedValue
        this.props.decrement(value * 1)
    }
    incrementIdOdd = () => {
        if (this.props.count % 2) {
            const { value } = this.selectedValue
            this.props.increment(value * 1)
        }
    }
    incrementAsync = () => {
        setTimeout(() => {
            const { value } = this.selectedValue
            this.props.increment(value * 1)
        }, 500);
    }
    render() {
        return (
            <div>
                <h1>当前求和为：{this.props.count}</h1>
                <select ref={c => this.selectedValue = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIdOdd}>奇数+</button>&nbsp;
                <button onClick={this.incrementAsync}>异步+</button>
            </div>
        )
    }
}

容器组件：

        使用react-redux提供的connect这个函数，用于和UI组件建立联系，同时还能接收到两个参数，分别是mapStateToProps（映射状态）、mapDispatchToProps（映射操作状态的方法）

// 引入UI组件
import CountUI from '../../Components/Count/index'
// 引入connect用于连接UI组件和redux
import { connect } from 'react-redux'
import { crementIncrementAction, crementDecrementAction } from '../../redux/count_action'
// 该函数的返回值作为状态传递给了UI组件--映射状态
const mapStateToProps = (state) => {
    console.log(state)
    return {
        count: state
    }
}
// 该函数的返回值作为方法传递给了UI组件--映射操作状态的方法
const mapDispatchToProps = (dispatch) => {
    console.log(dispatch)
    return {
        increment: (data) => {
            dispatch(crementIncrementAction(data))
        },
        decrement: (data) => {
            dispatch(crementDecrementAction(data))
        }
    }
}
// 创建并暴露一个Count的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)

•  mapStateToProps
  • 用于映射store中的状态到props中，方便UI组件进行调用
• mapDispatchToProps
  • 用于映射操作状态的方法到props中，方便在UI组件中进行调用

 App：在外层的App中引入对应的容器组件，并同时传入store

import React, { Component } from 'react'
import Count from './containers/Count'
import store from './redux/store'
export default class App extends Component {
  render() {
    return (
      <div>
          <Count store={store}/>
      </div>
    )
  }
}

4.简化版代码（开发中常用）

简化：

         UI组件和容器组件合二为一：可以增加代码可读性，减少文件数量。

         同时mapDispatchToProps可以触发简写形式，直接传入action创建对象，react-redux在内部可以帮助我们进行自动分发（diapatch）

// 引入connect用于连接UI组件和redux
import { connect } from 'react-redux'
import React, { Component } from 'react'
import { crementIncrementAction, crementDecrementAction } from '../../redux/count_action'
// 创建并暴露一个Count的容器组件
export default connect(
    state => ({ count: state }),
    // react-redux优化后支持自动分发
    {
        increment: crementIncrementAction,
        decrement: crementDecrementAction
    }
)(class Count extends Component {
    increment = () => {
        const { value } = this.selectedValue
        this.props.increment(value * 1)
    }
    decrement = () => {
        const { value } = this.selectedValue
        this.props.decrement(value * 1)
    }
    incrementIdOdd = () => {
        if (this.props.count % 2) {
            const { value } = this.selectedValue
            this.props.increment(value * 1)
        }
    }
    incrementAsync = () => {
        setTimeout(() => {
            const { value } = this.selectedValue
            this.props.increment(value * 1)
        }, 500);
    }
    render() {
        return (
            <div>
                <h1>当前求和为：{this.props.count}</h1>
                <select ref={c => this.selectedValue = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIdOdd}>奇数+</button>&nbsp;
                <button onClick={this.incrementAsync}>异步+</button>
            </div>
        )
    }
}

)

Provider的使用--相当于一个大家长，用来传递store，只用写一次，避免重复传递

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
//相当一个大家长
import { Provider } from "react-redux";
import store from './redux/store';
ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>
, document.getElementById('root'));