React-Redux核心原理与容器组件实战

‌Redux‌：纯JavaScript状态管理库，不绑定任何UI框架，可在React、Vue、Angular甚至原生JS项目中使用，只负责全局状态的集中存储、更新规则定义，不处理视图层的渲染同步逻辑。
‌React-Redux‌：专门为React生态设计的绑定工具，完全依赖React的Context机制实现store的全局传递，只服务于React项目，核心作用是打通Redux状态与React组件的自动渲染链路。

连接容器组件和UI组件

1、根据上期文章的代码进行改造成UI组件

javascript 复制代码

import { React，{ Component } } from 'react'
 
export default class Count extends Component {
 
    state= {
        car:'0'
    }
 
    increment = () => {
        const { value } = this.selectNumber 
      
 
    }
    
    decrement = () => {
        const { value } = this.selectNumber 
       
 
    }
 
    incrementIfOdd =() => {
        const { value } = this.selectNumber 
    }
 
    incrementAsync = () => {
        const { value } = this.selectNumber
    }
    
    render(
        <div>
            <h1>当前求和为：</h1>
            <select ref={ c => this.selectNumber = c }>
                <option value="1">1</option>
                <option value="2">2</option> 
                <option value="3">3</option>
            </select>
            <button onClick = { this.increment }>+</button>
            <button onClick = { this.decrement }>-</button>
            <button onClick = { this.incrementIfOdd }>当前求和为奇数再加</button>
            <button onClick = { this.incrementAsync }>异步加</button>
        </div>
    )
}

2、容器组件

下载react-redux依赖。创建containers文件用以放入更多的容器组件，便于管理，并在其创建Count文件夹和Count文件夹里的index.jsx文件

javascript 复制代码

//引入之前改造的UI组件
import CountUI from './count'

//引入store
import store from '../redux/store'

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

//使用connect()()创建并暴露一个Count的容器组件
//const CountContainer = connect()(CountUI)
export default connect()(CountUI)

展示页面的时候，就不能使用改造的UI组件了，就需要使用容器组件了

App.jsx

javascript 复制代码

import React,{ Component } from 'react'
import Count from './containers/Count'

import from './redux/store'

export default class App extends Component {
    reder(){
        return (
            <div>
                <Count store = { store }/>
            </div>
        )
    }
}

react-redux的基本使用

1、容器组件改造

javascript 复制代码

//引入之前改造的UI组件
import CountUI from './count'

//引入store
import store from '../redux/store'

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

//a函数返回的对象中的key就作为传递给UI组件props的key，
//value就作为传递给UI组件props的value--状态
function a(){
    return { n：900 }
}

//b函数返回的对象中的key就作为传递给UI组件props的key，
//value就作为传递给UI组件props的value--操作状态的方法
function b(){
    return { jia:()=>{ console.log(1) } }
}

//使用connect()()创建并暴露一个Count的容器组件
export default connect(a,b)(CountUI)

2、UI组件中打印props

javascript 复制代码

render(){
    console.log(this.props)
}

利用这点，UI组件就可以展示容器组件传递的值

javascript 复制代码

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

3、容器组件中传递store或操作给UI组件

javascript 复制代码

//引入之前改造的UI组件
import CountUI from './count'

//引入store
import store from '../redux/store'

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

//a函数返回的对象中的key就作为传递给UI组件props的key，
//value就作为传递给UI组件props的value--状态
function a(state){
    return { count：state }
}

//b函数返回的对象中的key就作为传递给UI组件props的key，
//value就作为传递给UI组件props的value--操作状态的方法
function b(dispatch){
    return { jia:(number)=>{ 
      //通知redux执行方法
       dispatch(type:'increment',data:number)

      //也可以使用我们在之前的文章中提到的action改写
      //dispatch(createIncrementAction(number))
  } }
}

//使用connect()()创建并暴露一个Count的容器组件
export default connect(a,b)(CountUI)

4、UI组件调用容器组件方法

javascript 复制代码

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

5、正式化容器组件

javascript 复制代码

//引入之前改造的UI组件
import CountUI from './count'

//引入store
import store from '../redux/store'

//引入createIncrementAction、createDecrementAction、createIncrementAsyncAction
。。。。。

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

//mapStateToProps函数返回是一个对象
//返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
//mapStateToProps用于传递状态
function mapStateToProps(state){
    return { count：state }
}

//mapDispatchToProps函数返回是一个对象
//返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
//mapDispatchToProps用于传递操作状态的方法
function mapDispatchToProps(dispatch){
    return {
        jia：(number)=>{ dispatch(createIncrementAction(number)) },
        jian：(number)=>{ dispatch(createDecrementAction(number)) },
        jiaAsync：(number,time)=>{ dispatch(createIncrementAsyncAction(number,time)) },
    }
}

//使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)