在 React HOC 中使用 Redux connect

Use Redux connect in React HOC

我已经为 sessionTimeout 做出反应 HOC。现在我想 Redux connect 以使用 redux action 方法。

当我调用方法时 this.props.actions.logout 它抛出错误未定义。

我想如何在我的 HOC 中连接 redux

HOC

import React from 'react';
import { Modal } from 'antd';
import * as actions from '../../actions';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

export default function(ComposedClass){
 return class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      warningTime: 4000,
      signoutTime: 5000,
    };
  }

  componentDidMount() {
    this.events = [
      'load',
      'mousemove',
      'mousedown',
      'click',
      'scroll',
      'keypress'
    ];

    for (var i in this.events) {
      window.addEventListener(this.events[i], this.resetTimeout);
    }

    this.setTimeout();
  }

  clearTimeoutFunc = () => {
    if (this.warnTimeout) clearTimeout(this.warnTimeout);
    if (this.logoutTimeout) clearTimeout(this.logoutTimeout);
  };

  setTimeout = () => {
    this.warnTimeout = setTimeout(this.warn, this.state.warningTime);
    this.logoutTimeout = setTimeout(this.logout, this.state.signoutTime);
  };

  resetTimeout = () => {
    this.clearTimeoutFunc();
    this.setTimeout();
  };

  warn = () => {
    Modal.warning({
      title: 'Session Timeout',
      content: 'Your session is about to expire in 1 mintue',
    });
  };

  logout = () => {
    this.props.actions.logout()
  };

  render() {

    return (
      <div>
        <ComposedClass {...this.props} />
      </div>
    );

  }
}
}

您可以在 HOC 中连接组件,return 从中连接组件

export default function(ComposedClass){

    class Component extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          warningTime: 4000,
          signoutTime: 5000,
        };
      }

      componentDidMount() {
        this.events = [
          'load',
          'mousemove',
          'mousedown',
          'click',
          'scroll',
          'keypress'
        ];

        for (var i in this.events) {
          window.addEventListener(this.events[i], this.resetTimeout);
        }

        this.setTimeout();
      }

      clearTimeoutFunc = () => {
        if (this.warnTimeout) clearTimeout(this.warnTimeout);
        if (this.logoutTimeout) clearTimeout(this.logoutTimeout);
      };

      setTimeout = () => {
        this.warnTimeout = setTimeout(this.warn, this.state.warningTime);
        this.logoutTimeout = setTimeout(this.logout, this.state.signoutTime);
      };

      resetTimeout = () => {
        this.clearTimeoutFunc();
        this.setTimeout();
      };

      warn = () => {
        Modal.warning({
          title: 'Session Timeout',
          content: 'Your session is about to expire in 1 mintue',
        });
      };

      logout = () => {
        this.props.actions.logout()
      };

      render() {

        return (
          <div>
            <ComposedClass {...this.props} />
          </div>
        );

      }
    }
    return connect(mapStateToProps, mapDispatchToProps)(Component)
}