Use React(Redux) Component for customUI

[malhotraashna]

I tried using React component for the customUI. I am using Redux in my app. My files look something like this:

custom-ui-component.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class ConfirmDeleteAlert extends Component {
  render() {
    return (
      <div className="delete-confirm-alert-box">
        <h1>Delete File</h1>
        <p>Are you sure you want to delete this file?</p>
        <button className="btn-info delete-confirm-alert-button" onClick={this.props.onClose}>No</button>
        <button
          className=" btn-info delete-confirm-alert-button"
          onClick={() => {
           this.props.onClose();
          }}
        >
          Yes, Delete it!
        </button>
      </div>
    );
  }
}

ConfirmDeleteAlert.propTypes = {
  actions: PropTypes.objectOf(PropTypes.any).isRequired,
};

export default ConfirmDeleteAlert;

custom-ui-container.js

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ConfirmDeleteAlert from '../components/confirm_delete';

function mapStateToProps(state) {
  return {
    random: state.random,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(ConfirmDeleteAlert);

render.js

import ConfirmDeleteAlert from '../containers/confirm_delete';

confirmAlert({
       customUI: ({ onClose }) => {
        return (
          <ConfirmDeleteAlert onClose={onClose}  />
        );
      },
    });
  }

But when rendering, I get the following error:

Error: Could not find "store" in either the context or props of "Connect(ConfirmDeleteAlert)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(ConfirmDeleteAlert)"

It works fine when I simply use the React component without redux. Is there some problem with handling redux? Or is there a different way to use react-redux components as customUI components?

[annmirosh]

As a workaround, you can pass store in props.

[bsor-dev]

As a workaround, you can pass store in props.

But it doesn't update the store during the flight