React-redux: невозможно извлечь хранилище как реквизиты с использованием connect, невозможно прочитать свойство 'props' с неопределенной ошибкой

Question

Я пытаюсь отреагировать и создаю форму входа для одностраничного приложения, используя то же самое.Я использую Redux для хранения информации о пользователе по всему приложению и до сих пор не могу пройти через настройку шаблона для того же.

Я почти закончил, но я не могу отправить свое действие с помощью метода отправки, воткод для моего компонента входа в систему:

    import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import { connect } from 'react-redux';

// import user actions

import { logMeIn } from "../actions/userActions"

const boxStyle = {
    width: "400px",
    margin: "40px auto",
}



export default connect((store)=>{
    return {
        user: store.user
    };
})(class loginBox extends Component {

    login() {
        let email = document.getElementById("email");
        let password = document.getElementById("password");
        email = email.value;
        password = password.value;

        return this.props.dispatch(logMeIn(email, password))
    }

    render(){
        return (
            <div className="box" style={boxStyle}>
              <form className="form">
                <div className="field">
                    <label className="label">Your Email</label>
                    <input className="input" type="email" id="email" />
                </div>
                <div className="field">
                    <label className="label">Your Password</label>
                    <input className="input" type="password" id="password" />
                </div>
                <div className="level">
                    <button className="button is-dark" type="button" onClick={ this.login }>Login</button>
                    <NavLink to="/">Reset password</NavLink>
                </div>
              </form>
            </div>
          )
        }
})

здесь, код компилируется без ошибок, и отображается страница входа, НО при отправке формы возникает следующая ошибка:

× TypeError: Невозможно прочитать свойство 'props' из неопределенного

, указывающего на строку return this.props.dispatch(logMeIn(email, password)) в коде.

Поскольку я новичок в Redx, я не могу полностьюпонять это, однако, посмотрите на мой магазин:

    import { createStore, applyMiddleware } from 'redux';
import reducer from './reducers'
import logger from 'redux-logger'
import thunk from 'redux-thunk'

const middleware = applyMiddleware(logger, thunk)

export default createStore(reducer, middleware)

это просто.Мне определенно не хватает чего-то здесь, и я не знаю, что это такое .. пожалуйста, помогите мне решить эту проблему.

Спасибо

Answer 1

Это особый случай этой популярной проблемы .Это не связано с Redux.login метод используется в качестве обратного вызова и теряет this контекст.

Он должен быть либо:

login = this.login.bind(this);

login() {...}

Или:

login = () => {...}

Первыйпредпочтительнее по нескольким причинам .