Потеря this в mapDispatchToProps. Почему dispatch не имеет его?

Question

[AndersonGsr1989]

Недавно начал углубляться в React/Redux и столкнулся с проблемой. Сделал connect всё как в документации, но у меня теряется this в методе dispatch. При этом mapStateToProps отрабатывает корректно.
Вот код

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

Ошибка пробрасывается здесь

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

Ну и её код

Как это решить? Что я упускаю?

Answer 1

[Егор Живагин]

Блин, я даже не знаю, что сказать... Давайте по-порядку
1) По каким материалам вы учите? Они точно не устарели? Меня очень смущает ваш constructor, потому что пропсы и так автоматически записываются в this.props. Получается, что вместо всего метода можно написать просто

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

2) Тут я могу быть не прав, но, насколько я помню React.createRef можно использовать только внутри классового компонента. Функция mapStateToProps никак не связана с вашим классом Interface, у неё совсем другой контекст

3) Теперь непосредственно о вашей проблеме. Редьюсер, в котором находится switch/case никак не связан с вашим классом Interface. Советую ещё раз перечитать в документации как работает this. У вас он указывает на функцию, в которой вы к нему обращаетесь. Не могу подсказать точнее, потому что меня немного вводит в ступор строка dispatch(action){

Могу сказать только три вещи:
- Никогда не обновляйте стейт вот так: this.state.SOME_FIELD = ... . Используйте для этого только this.setState({ SOME_FIELD: ... }) . Иначе компонент может не отрисовать новые данные
- Редьюсер и redux никак не связаны со стейтом и вашими классами. У них абсолютно разный контекст выполнения. this в Реакте работает точно так же, как и должен работать в JS-e
- Очень советую пройти официальный туториал по реакту - ссылка

Comments

[AndersonGsr1989]

Спасибо. Я решил проблему. Обязательно пройду курс. Просто не так много информации в понятной форме.
И стейт я не изменял.

import todoreducer from "./todoreducer"
import donereducer from "./donereducer"
const ADD="ADD"
const REMOVE="REMOVE"
let store={
    state:{
        todo:[],
        done:[],
    },
    getState(){
        return this.state;
    },

    dispatch(action){
        switch (action.type) {
            case ADD:{
                this.state.todo=todoreducer(this.state.todo,action.data)
                break;
            }
            case REMOVE:{
                this.state.done.push(action.data)
                this.state.todo=donereducer(this.state.todo,action.data)
                break;
            }
        
            default:
                break;
        }
    },
    actionMaker(obj){
        return{type:obj[0],data:obj[1]}
    },
    rerender:()=>{
        console.log("refreshed");
    },
    subscribe(obs){
        debugger
        console.log("called");
        this.rerender=obs;
    },
    foo(){
        console.log("rest");
    }
}

export default store

Вот как он выглядит. Это не компонент.

[Егор Живагин]

AndersonGsr1989, интересно, выглядит, как-будто вы изобретаете redux :)

И стейт я не изменял.

Я конкретно про вот это место - this.state.done.push(action.data)

Сейчас понятно, что это не в компоненте и setState не сработает, но проблема остаётся - при пуше нового элемента в массив, ссылка на массив не изменяется. Если какой-то компонент подписан только на изменения в done , он их не увидит