Вход с Reactjs не работает, как говорится Диспетчерство не является функцией

Question

Я пытаюсь ввести логин в моем приложенииactjs.Я также новичок, чтобы реагировать.

Мое приложение содержит несколько компонентов, таких как about, навигация, вход в систему, регистрация, публикация, уведомление и т. Д.

Здесь, есть такие компоненты, как about,зарегистрироваться, что пользователь может получить доступ без входа в систему, но есть и другие, такие как уведомления, публикуя, что вы можете получить доступ только после входа в систему.

В настоящее время я работаю над входом в приложение.Я создал компонент входа и в компоненте входа у меня есть функция

handleSubmit(event) {
    event.preventDefault();
    this.setState({ submitted: true });
    const credential = this.state.user;
    const { dispatch } = this.props;
    if( credential.username && credential.password){
      dispatch(userActions.login(credential.username, credential.password));
      //this.loginUser(credential);
    }
}

Я импортировал import {userActions} из '../_actions';к компоненту входа в систему.

В UserActions я определил функцию входа в систему следующим образом:

Но когда я отправляю форму, я получаю ошибку, TypeError: dispatch не является функцией.

function login(username, password) {
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
    };

    return fetch(URL_LOGIN, requestOptions)
        .then(handleResponse)
        .then(user => {
            // login successful if there's a jwt token in the response
            if (user.token) {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('user', JSON.stringify(user));
            }

            return user;
        });
}

Любая помощь по этой ошибке будет принята с благодарностью.Кроме того, я буду благодарен, если кто-то может дать мне очень простое руководство, которое может помочь мне с этим процессом входа в мое приложение.Примечание. Я не запустил приложение с помощью redux и просто установил его в свое приложение, и я стараюсь следовать инструкциям здесь http://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example, хотя я сталкиваюсь с множеством трудностей с ним.Кроме того, мой API в PHP

Answer 1

Вы должны получить доступ к способу отправки, доступному в магазине, через connect-Забронировать и Провайдера.Вам необходимо отправить свои действия, связанные с отправкой.Вы можете сделать это, используя два метода.Первый метод прост, но становится избыточным при использовании нескольких действий.Второй метод - это то, что вы обычно используете в приложениях с реакцией-редукцией

Метод 1:

import { connect } from "react-redux"
function mapStateToProps(state) {
  return {
    yourValues: 1,
  }
}

function mapDispatchToProps(dispatch) {
  return {
    login: (...rest) => {
      dispatch(login(...rest))
    },
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(YourComponent)

Метод 2:

import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import * as LoginActions from "/your-login-path"
function mapStateToProps(state) {
  return {
    yourValues: 1,
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    ...LoginActions,
  })
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(YourComponent)

Как только вы закончите с этой реализацией, вы сможете получить доступ к методу входа в реквизит.Теперь вы можете напрямую войти в систему, например так:

const { login } = this.props
login(yourarguments)

Пожалуйста, прочитайте больше об этом на сайте Redx.