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

解决方式：

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)