将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相结合

回答

相关问题