Redux react-redux class组件使用篇

class组件中使用redux

详细参考搭配 React中有提到怎么使用

前提，在react应用中已经成功注入了redux。(之前已经写过了怎么注入redux的文章)只是在使用上hooks的使用和calss组件有所区别,class组件中主要使用react-reudx暴露的 connect() 方法，将包装好的组件连接到Redux，即可在props中获取到注入的store，以及使用dispatch方法

代码块（组件中简单的使用）

import React  from 'react'
import { connect } from 'react-redux';//=================================
// let src = '../../static/video/site.mp4'
class About extends React.Component {
    constructor(props){
        super(props)
        this.state = {

        }
    }
    componentDidMount(){
        console.log(this.props)
    }
    paly(e){
        console.log(e,12)
    }
    render(){
        return (
            <div style={{color:'red'}}>
                About level2权限
                <div style={{zIndex:99999,backgroundColor:'rgba(0,0,0,0)'}}>
                    <video width="100%" height="850" loop autoPlay onCanPlay={this.paly}>
                        {/* src={require(路径).default */}
                        <source src={require('../../static/video/site.mp4').default} type="video/mp4" />
                        {/*  */}
                        浏览器不支持 video 标签，建议升级浏览器。
                    </video>
                </div>
                
            </div>
        )
    }
}
//connect的唯一参数是 selector。此方法可以从 Redux store 接收到全局的 state，然后返回一个你的组件中需要的 props。
function mapStateToProps(state) { 
    return Object.assign({}, state)
}
export default connect(mapStateToProps)(About)

摘要：

使得我们的 store 能为下面的组件所用。（在内部，这个是通过 React 的 “context” 特性实现。）
接着，我们想要通过 react-redux 提供的 connect() 方法将包装好的组件连接到Redux。尽量只做一个顶层的组件，或者 route 处理。从技术上来说你可以将应用中的任何一个组件 connect() 到 Redux store 中，但尽量要避免这么做，因为这个数据流很难追踪。任何一个从 connect() 包装好的组件都可以得到一个 dispatch 方法作为组件的 props。connect() 的唯一参数是 selector。此方法可以从 Redux store 接收到全局的 state，然后返回一个你的组件中需要的 props。最简单的情况下，可以返回一个初始的 state ，但你可能希望它发生了变化。