在 React HOC 中使用 Redux connect

Question

我已经为 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>
    );

  }
}
}

Answer 1

您可以在 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)
}

在 React HOC 中使用 Redux connect

Use Redux connect in React HOC

reactjs

redux

connect