How to handle with Refs in react-redux connect function

Question

I have a component wrapped by the react-redux "connect()" function and I have to manage the <textarea> with Refs in React.

I'm using this version of react/react-redux/redux: "react": "^16.13.1", "react-redux": "^7.2.1", "redux": "^4.0.5",

I've been googling all day, but I've seen everything that can help me.

Someone who uses hooks... Ok, but at this stage I don't want to use them because I have to study them first

Someone who said "you can put a ref on the wrapper component"... Ok, but in my 8 hours of Google search I can't figure out how to do it?

Is there someone who can help me understand and tell me how to write the right code? Thanks

The code of my component is the following:

class EditorArea extends Component {
    constructor(props) {
        super(props)
        this.textAreaRef = React.createRef();
    }

    render() {

        const {
            handleEditorChange,
            handleTextSelection,
            markdownText } = this.props;

        return (
            <Fragment>
                <div id="editor-area">
                    <div id="text-area">
                        <textarea
                            id="editor"
                            ref={this.textAreaRef}
                            onChange={handleEditorChange}
                            onClick={() => handleTextSelection(this.textAreaRef)}
                            onSelect={() => handleTextSelection(this.textAreaRef)}
                            value={markdownText}
                            placeholder="Start here...">
                        </textarea>
                    </div>
                </div>
            </Fragment>
        )

    }
}

const madDispatch = dispatch => {
    return {
        handleEditorChange: (e) => dispatch(handleEditorChange(e)),
        handleTextSelection: () => dispatch(handleTextSelection())
    }

}

const mapState = state => {
    const { editingStatus, markdownText } = state.changeMarkdownText;

    return {
        editingStatus,
        markdownText,
    }
}


export default connect(
    mapState, madDispatch, null, { forwardRef: true }
)(EditorArea);

EDIT: I forgot to mention my needs and the problem: I need to access to the selectionStart and selectionEnd property of the textarea DOM object in my action-creator function but I get the error "TypeError: Cannot read property 'current' of undefined"

This is my action-creator function:

export const handleTextSelection = (text) => {

    let newTextSelection = {};

    let startSelection = text.current.selectionStart;
    let endSelection = text.current.selectionEnd;

    newTextSelection.startSelection = startSelection;
    newTextSelection.endSelection = endSelection;
 
    return {
        type: MARKDOWN_TEXT_SELECTION,
        payload: newTextSelection
    }
}

Answer 1

I think your problem might be with the mapDispatch function. You are not passing the ref as a parameter so it always dispatches undefined (empty param). Try this instead:

const madDispatch = dispatch => {
    return {
        handleEditorChange: (e) => dispatch(handleEditorChange(e)),
        //pass a param here: 
        handleTextSelection: (textAreaRef) => dispatch(handleTextSelection(textAreaRef))
    }

}