React在组件中监听redux中state状态的改变

小灰灰 2021-09-17 15:36 993阅读 0赞

### 解决方式： ###

### 1、在组件中引入store ###

### 2、在constructor构造器方法中，重写store.subscribe方法（该方法即是监听state状态改变的放过） ###

### 组件完整代码如下： ###

import React, { Component } from 'react'
    import CSSModules from 'react-css-modules'
    
    import { connect } from 'react-redux'
    import store from '../../redux/store'
    
    import styles from './BgMusic.css'
    
    @CSSModules(styles)
    class BgMusic extends Component {
      // 构造器
      constructor(props) {
        super(props)
        console.log('执行了constructor')
        // 监听state状态改变
        store.subscribe(() => {
          console.log('state状态改变了，新状态如下')
          console.log(store.getState())
          const state = store.getState()
          if (state.music.play) {
            // 播放背景音乐
            this.audio1.play()
          }
          else {
            // 暂停背景音乐
            this.audio1.pause()
          }
        })
      }
      render() {
        return (
          <div className={styles.container}>
            <audio ref={audio1 => { this.audio1 = audio1 }} className={styles.hidden} autoPlay="autoplay" controls="controls" loop="loop" preload="auto" src="./music/music.mp3">
                你的浏览器版本太低，不支持audio标签
            </audio>
          </div>
        )
      }
    }
    export default connect(
      // 这里的state，就是公共容器中的state，而不是当前组件的state。在这里定义了之后，在当前组件中，就可以通过this.props.music拿到该对象
      state => ({ music: state.music }),
    )(BgMusic)