Losing this in mapDispatchToProps. Why doesn't dispatch have it?

Question

React

Recently started digging into React/Redux and ran into a problem. I did connect everything as in the documentation, but I lose this in the dispatch method. At the same time, mapStateToProps works correctly.
Here is the code

import React from "react"
import { connect } from "react-redux"
class Interface extends React.Component{
    constructor(props){
        debugger
        super(props)
        this.props=props;
        console.log(props);
        this.elements=null;
    }

    render(){
        if(this.props.todo.length>0){
            this.elements=this.props.todo.map((value)=>{
            return <li key={value}>{value}</li>
            })
        }
        debugger
        return(
            <div>
                <div><p>add</p><input type="text"
                ref={this.props.add}></input>
                <button onClick={this.props.foo}>add</button></div>
                <div><p>remove</p><input type="text" ref={this.props.remove}></input></div>
                <h1>Todo list</h1>
                <ul>{this.elements}</ul>
            </div>
        )
    }
}
function mapStateToProps(state) {
    return{
        add:React.createRef(),
        remove:React.createRef(),
        todo:state.todo,
    }
}
function mapDispatchToProps(dispatch) {
    return{
        foo:()=>{
            dispatch({type:"ADD",data:"data"})
        }
    }
}
let Cover = connect(mapStateToProps,mapDispatchToProps)(Interface)
export default Cover

The error is thrown here

dispatch(action){
        switch (action.type) {
            case ADD:{
                debugger
                this.state.todo=todoreducer(this.state.todo,action.data)
                this.rerender()
                break;
            }
            case REMOVE:{
                this.state.done.push(action.data)
                this.state.todo=donereducer(this.state.todo,action.data)
                this.rerender()
                break;
            }
        
            default:
                break;
        }
    }

Well, her code

How to solve it? What am I missing?

Answer 1

Damn, I don't even know what to say... Let's go in order
1) What materials do you teach? Are they really outdated? Your constructor really confuses me, because props are automatically written to this.props anyway. It turns out that instead of the whole method, you can simply write

class Interface extends React.Component{
  elements = null;
...
}

2) Here I can be wrong, but as far as I remember React.createRef can only be used inside a class component. The mapStateToProps function has nothing to do with your Interface class, it has a completely different context
3) Now about your problem directly. The reducer that the switch/case is in has nothing to do with your Interface class. I advise you to re-read in the documentation how this works. You have it pointing to the function in which you are accessing it. I can't be more precise, because the line is a bit confusing to me. dispatch(action){
I can only say three things:
- Never update a state like this: this.state.SOME_FIELD = ... . Use only this.setState({ SOME_FIELD: ... }) for this. Otherwise, the component may not render new data.
- The reducer and redux have nothing to do with the state and your classes. They have completely different execution context. this in React works exactly the same as it should work in JS-e
- I strongly advise you to go through the official React tutorial - link