React值react-redux的基本使用

1）深刻理解原理图

2）基本使用

1. 明确两个概念
   1）UI组件：不能使用任何redux的api，只负责页面的呈现，交互等
   2）容器组件：负责和redux通信，将结果交给UI组件
2. 如何创建一个容器组件——靠react-redux的connect函数
   connect(mapStateToProps,mapDispatchToProps)(CountUI) (UI组件)
   - mapStateToProps:映射状态，返回值是一个对象
   - mapDispatchToProps：映射操作状态的方法，返回值是一个对象
3. 备注：容器组件中的store是靠props传进去的，而不是在容器中直接引入

3）使用案例

1. 首先创建一个UI组件的容器
   src----->Containers---->Count---->index.jsx

   安装react-redux这个库

npm i react-redux

创建Count组件容器

// 引入Count的ui组件
import CountUI from "../../Components/Count";
// 引入action
import {
    
    createIncreamentAction,createDecreamentAction,createIncrementAsyncAction} from '../../redux/count_action'

// 引入connect用于连接UI组件与redux
import {
    
    connect} from 'react-redux'

/* 
    1.mapStateToProps函数返回的是一个对象
    2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
    3.mapStateToProps用于传递状态
*/ 
function mapStateToProps(state){
    
    
    return {
    
    count:state}
}
// mapDispatchToProps函数返回的对象的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value——操作状态的方法
function mapDispatchToProps(dispatch){
    
    
    return {
    
    
        jia:number=>dispatch(createIncreamentAction(number)),
        jian:number=>dispatch(createDecreamentAction(number)),
        jiaAsync:(number,time)=>dispatch(createIncrementAsyncAction(number,time))
}
}
// 使用connect()()创建容器组件，让容器组件与UI组件建立联系，并暴露容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

src---->App.jsx
注册容器组件，把store传给Containers中的Count组件

import React, {
    
     Component } from 'react'
// 引入store
import store from './redux/store'
// 引入容器Count
import Count from './containers/Count'
export default class App extends Component {
    
    
    render() {
    
    
        return (
            <div>
                {
    
    /*渲染容器组件，把store传给容器组件*/}
                <Count store={
    
    store}/>
            </div>
        )
    }
}

src—redux文件夹，不需要变动和之前使用redux这个库时一样创建

src—components----Count—index.jsx
使用react-redux中的数据，通过props从容器组件中获取需要的状态以及方法

import React, {
    
     Component } from 'react'

export default class Count extends Component {
    
    

    state={
    
    carName:'奔驰c63'}

    // 加法
    increment=()=>{
    
    
        const {
    
    value}=this.selectNumber
        this.props.jia(value*1)
    }

    // 减法
    decrement=()=>{
    
    
        const {
    
    value}=this.selectNumber
        this.props.jian(value*1)
    }

    // 奇数再加
    incrementIfOdd=()=>{
    
    
        const {
    
    value}=this.selectNumber
        if (this.props.count % 2 !== 0) {
    
    
            this.props.jia(value*1)
        }
    }

    // 异步加
    incrementAsync=()=>{
    
    
        const {
    
    value}=this.selectNumber
        this.props.jiaAsync(value*1,1000)
    }

    render() {
    
    
        return (
            <div>
                <h1>当前求和为：{
    
    this.props.count}</h1>
                <select ref={
    
    c=>this.selectNumber=c} >
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;&nbsp;
                <button onClick={
    
    this.increment}>+</button>&nbsp;&nbsp;
                <button onClick={
    
    this.decrement}>-</button>&nbsp;&nbsp;
                <button onClick={
    
    this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;&nbsp;
                <button onClick={
    
    this.incrementAsync}>异步加</button>&nbsp;
            </div>
        )
    }

}