在組件中監(jiān)聽redux中state狀態(tài)的改變

解決方式

1、在組件中引入store

2、在constructor構(gòu)造器方法中，重寫store.subscribe方法（該方法即是監(jiān)聽state狀態(tài)改變的放過）

組件完整代碼如下： 

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 {
? // 構(gòu)造器
? constructor(props) {
? ? super(props)
? ? console.log('執(zhí)行了constructor')
? ? // 監(jiān)聽state狀態(tài)改變
? ? store.subscribe(() => {
? ? ? console.log('state狀態(tài)改變了，新狀態(tài)如下')
? ? ? 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標(biāo)簽
? ? ? ? </audio>
? ? ? </div>
? ? )
? }
}
export default connect(
? // 這里的state，就是公共容器中的state，而不是當(dāng)前組件的state。在這里定義了之后，在當(dāng)前組件中，就可以通過this.props.music拿到該對象
? state => ({ music: state.music }),
)(BgMusic)

React和redux的狀態(tài)處理

我們知道react中state是組件更新的唯一指標(biāo)，并且只能通過組件的this.setState方法觸發(fā)組件的重新渲染。這種形式導(dǎo)致了一個組件A想要觸發(fā)另一個組件B更新，就必須觸發(fā)組件B內(nèi)部的this.setState。一般是通過一開始就在B中設(shè)置委托到組件A中。

例如： 

class B extends React.Component{
    state={key:"value"}
    handle(){
        this.setState({key:"newvalue"})
    }
    render(){
        return <div> 
                <A onOk=>{this.handle.bind(this)}/>
                <span>{this.state.key}</span>
            </div>
    }
}
class A extends React.Component{
    render(){return <button onClick={this.props.onOk}>click</button>}
}

這樣也就隱形的要求B組件必須是A組件的父組件，換句話說：如果一個組件想要觸發(fā)另一個組件的更新，需要觸發(fā)者是被觸發(fā)者的子組件。 父組件可以將更新的函數(shù)預(yù)先定好，作為屬性傳入子組件中，這樣子組件中調(diào)用這個屬性函數(shù)就觸發(fā)了父組件的更新，本質(zhì)是父組件將自己的一個函數(shù)委托給子組件處理。

當(dāng)組件變得又多又復(fù)雜的時候，可能需要跨越好多層父子關(guān)系來傳遞這個閉包，這使得狀態(tài)的管理非常復(fù)雜。

例如這種情況下，C想要觸發(fā)A.setState,那就需要A先封好閉包作為屬性傳給B，B再傳給C，C在合適的時機(jī)調(diào)用。調(diào)用完了，A的setState會引起所有的子組件重新render。

如果C想要觸發(fā)D的更新，則也需要A作為中介，將D中要更新的部分拿出來，作為props由A來傳入，這樣還是按照之前的做法，C可以引起A的render，進(jìn)而導(dǎo)致了所有組件render，也就包括了D。不過其實我們只想要D更新，其他組件并不需要更新。而且我們看到state的存儲很亂，有時候我們將state存到本組件中，由自己掌握更新的時機(jī)，有時候需要交給父組件來掌握，此時子組件是無狀態(tài)的，所有數(shù)據(jù)由父組件通過props傳入。

這種方式無論從閉包傳遞還是過多的組件render上都是不好的，我們思考能不能通過更高效的方式完成這件事。首先是閉包傳遞，其實本質(zhì)上是A把更新這件事放到一個函數(shù)中，然后把該函數(shù)作為屬性傳遞給了子組件。我們可以這樣來做，在A中設(shè)置一個事件監(jiān)聽器當(dāng)事件觸發(fā)的時候就更新狀態(tài)，而在C中設(shè)置一個事件激發(fā)當(dāng)合適的時機(jī)（如點擊按鈕）觸發(fā)這個事件，這樣就完成了直接觸發(fā)另一個組件的更新。這樣每個組件都有自己的state，并且都監(jiān)聽一個自己特定的事件，如果事件觸發(fā)，就相應(yīng)的調(diào)用setState完成自己的更新。

Redux就是這種思路，核心概念是store，所有組件ABCDE的state都存到了store.state中，這個變量只能通過觸發(fā)action才能改變，并且專門定義了這種根據(jù)action更新store.state值的函數(shù)叫reducer。當(dāng)然了改變了這個變量的值對我們整個react應(yīng)用沒有任何影響，還需要把這個值和每個組件內(nèi)的state關(guān)聯(lián)起來。每個組件中都有一個store.subcribe(func)，即每個組件都可以監(jiān)聽這個store.state的變化，如果變化就觸發(fā)這個函數(shù)，然后可以看變量中是不是和自己相關(guān)的例如可以在store中這樣存儲{a:xxx,b:xx,c:xx,d:xx}這樣A只需要檢查store.getState().a是不是有變。

如下：

上圖中，其實ABCD的回調(diào)函數(shù)都會觸發(fā)，只不過觸發(fā)后有個判斷，只有D的發(fā)生了變化，所以只有D進(jìn)行后續(xù)setState和render操作。

Redux的思想是這樣的，首先state全都交到store中來保存，每個組件訂閱store的變化，一但發(fā)生變化，就把自己的state同步。store的變化由action這種方式唯一觸發(fā)，管理起來也方便。不過Subscribe寫起來太麻煩了，所以ReactRedux模塊提供了Provider 和connect，可以很方便的完成自動Subscribe和自動封裝無狀態(tài)組件為有邏輯的組件，這種情況下我們只要寫無狀態(tài)組件，省了很多工作量。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論