將React videojs組件的狀態與Redux相結合

我目前在我的反應應用程序中有一個videojs組件（帶標記）。我想轉向react-redux。我試圖將這個組件的狀態存儲在reducer中。但我無法弄清楚正確的方法。她是我的代碼。將React videojs組件的狀態與Redux相結合

import assign from 'object-assign' 
import cx from 'classnames' 
import blacklist from 'blacklist' 
import React, {Component} from 'react' 


export default class PlayerLogic extends Component{ 
    constructor() { 
     super(); 
     this.state = { 
      player : {} 
     }; 
    } 
    componentDidMount() { 
     var self = this; 
     var player = videojs(this.refs.video, this.props.options).ready(function() { 
      self.player = this; 
      self.player.on('play', self.handlePlay); 
     }); 

     if (this.props.onPlayerInit) this.props.onPlayerInit(player); 
     player.markers({ 
      markerStyle: {}, 
      markers: [ 
       {length: 8, startTime: 10, endTime: 15, time: 9.5, text: "Cigarette"}, 
       {length: 2, startTime: 20, endTime: 25, time: 16, text: "Cigarette"}, 

      ], 
      onMarkerReached: function() { 
       player.pause(); 
      }, 

      next : function() { 
       // go to the next marker from current timestamp 
       console.log("reached"); 
       var currentTime = player.currentTime(); 
       for (var i = 0; i < markersList.length; i++) { 
        var markerTime = setting.markerTip.time(markersList[i]); 
        if (markerTime > currentTime) { 
         player.currentTime(markerTime); 
         break; 
        } 
       } 
      }, 


     }); 

     this.setState({ player: player }); 
     console.log({player: player}); 
    } 

    next() { 
     this.state.player.markers.next(); 
    } 
    prev() { 
     this.state.player.markers.prev(); 
    } 

    handlePlay(){ 
     console.log("handle play ") 
    } 

    render() { 
     var props = blacklist(this.props, 'children', 'className', 'src', 'type', 'onPlay'); 
     props.className = cx(this.props.className, 'videojs', 'video-js vjs-default-skin', 'vjs-big-play-centered'); 

     assign(props, { 
      ref: 'video', 
      controls: true, 
      width: "700", height: "450" 
     }); 


     return (
      <div> 
       <video {... props}> 
        <source src={this.props.src} type={this.props.type} id={this.props.id}/> 
       </video> 
       <button onClick={this.next.bind(this)}>next</button> 
       <button onClick={this.prev.bind(this)}>prev</button> 
      </div>) 

    } 
}

這是我的純粹反應成分。我該如何切換到react-redux。我知道所有的redux的基礎知識。我無法弄清楚，因爲改變狀態的代碼（player：player）僅在componentsDidMount中，我們正在通過setState方法改變狀態。

來源

2016-10-19 ApurvG

您無法將單個組件切換到Redux。當你說你使用Redux時，這意味着你將它用於整個應用程序。其實，可以使用Redux作爲你的應用程序的一部分，只是因爲你可以將該部分作爲一個單獨的模塊來處理，但這不是正確的方法。

Redux本身只是一個狀態容器。它是獨立的，它可以在沒有React的情況下使用。使Redux與React一起使用的是react-redux包。我敢打賭，你已經在你的項目依賴關係中擁有它了，但是如果不是，那麼你需要將該組件連接到你的Redux工作流程。關鍵詞是「連接」。爲此，有一個名爲connect的函數，該函數包含在react-redux包中。導入它：

import React, { Component } from 'react'; 
import { connect } from 'react-redux';

connect function accepts up to four arguments。要開始使用它，您只需要第一個，一個將狀態映射到道具的功能。這意味着它會在整個Store傳遞給它的第一個參數時執行，並且任何返回的內容都會出現在組件的道具中。執行connect函數的結果是另一個函數，它接受對組件的引用作爲參考，並確保您的組件真的會從該商店接收這些道具。

代碼：

export default connect(state => ({ 
    // here, you pick the properties of state you want to put into the props of PlayerLogic 
}))(PlayerLogic);

你可以看到，connect(...)(...)語法 - 這是因爲，再次，做connect(...)回報功能，並在執行功能（即connect(...)(...)）返回連接到您的存儲組件。

之後您仍然可以維護組件自己的狀態，但是整體目的是將狀態管理分離到您擁有的單個Store。如果組件使用this.setState更新其狀態，要更新Store中的任何值或許多值，則需要dispatch an action。既然你提到你知道Redux的基礎知識，我相信你可以從這一點上自己動手。祝你好運！

來源

2016-10-19 11:55:42

將React videojs組件的狀態與Redux相結合

回答

相關問題