Use Redux connect in React HOC

Question

I have react HOC for sessionTimeout. Now I want to Redux connect for use redux action method.

When I call method this.props.actions.logout It throws error Undefined.

How I suppose to connect redux in my HOC

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>
    );

  }
}
}

score 7 · Accepted Answer · answered Jul 26 '18 at 09:32

7

You can connect the component within the HOC and return the connected component from it

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)
}

answered Jul 26 '18 at 09:32

Shubham Khatri

270,417
55
406
400

Glad to have helped :-) – Shubham Khatri Jul 26 '18 at 09:37
Ok, you needed to make it fixed for redux. In that case this is better solution. But it doesnt give you flexibility to go with redux or any other state management. Have fun :) – Mario Petrovic Jul 26 '18 at 09:40
1

@MarioPetrovic, Generally you would connect the container and pass on the required data as props to the component created by HOC. That would give you flexibility, however OP use case was a little different – Shubham Khatri Jul 26 '18 at 09:41
Yep, that is true – Mario Petrovic Jul 26 '18 at 09:42
Will this HOC call in all the components? Becoz I see It working in all components. In login component also – Selvin Jul 26 '18 at 09:46
In my Route I'm using this way `path="/Dashboard" component={SessionTimeout(Dashboard)}` Is this correct? – Selvin Jul 26 '18 at 09:47
@Selvin, yes, whereever this HOC is used, in all of those components it will take the data from Redux store – Shubham Khatri Jul 26 '18 at 10:03
@ShubhamKhatri SessionTimeout works and also redirect to login as expected. But login component also shows same sessiontimeout warning. – Selvin Jul 26 '18 at 10:17
@Selvin, In such a case you would need to write a HOC differently for login component – Shubham Khatri Jul 26 '18 at 10:19
Hey I had one doubt. When redux store gets updated, does this class's `render` lifecycle will be called again ? – Meet Zaveri Jul 27 '19 at 09:51
Also is this a valid practice as there is authorization wrapper in my whole `` structure ? – Meet Zaveri Jul 27 '19 at 09:57

Use Redux connect in React HOC

1 Answers1