将 React videojs 组件的状态与 Redux 相结合

Question

我目前在我的反应应用程序中有一个 videojs 组件（带有标记）。我想转向 react-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 的所有基础知识。我无法弄清楚更改状态的代码（播放器：播放器）仅在 componentsDidMount 内部的方式，我们在这里通过 setState 方法本身更改状态。

Answer 1

您不能将单个组件切换到 Redux。当你说你使用 Redux 时，这意味着你将它用于整个应用程序。实际上，您可以将 Redux 用于应用程序的一部分，只是因为您可以将该部分视为单独的模块，但这不是正确的方法。

Redux 本身只是一个状态容器。它是独立的，可以在没有 React 的情况下使用。使 Redux 可以与 React 一起使用的是 react-redux 包。我敢打赌，您的项目依赖项中已经包含它，但如果没有，请执行

$ npm install --save redux react-redux

现在，您需要将该组件连接到您的 Redux 工作流程。关键词是“连接”。为此，react-redux 包中有一个名为 connect 的函数。导入它：

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

connect function accepts up to four arguments。要开始使用它，您只需要第一个，一个将状态映射到道具的函数。这意味着它是在将整个 Store 传递给它的第一个参数的情况下执行的，并且返回的任何内容都将出现在组件的 props 中。执行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 的组件。

之后您仍然可以维护组件自己的状态，但整个目的是将状态管理剥离到您拥有的单个 Store 中。如果组件使用this.setState 更新其状态，要更新Store 中的任何值或许多值，则需要dispatch an action。既然您提到您了解 Redux 基础知识，我相信您可以从这一点开始自己动手。祝你好运！