Поднять функции redux-token-auth из файла действия в поле зрения? - PullRequest
Новая
       7

Поднять функции redux-token-auth из файла действия в поле зрения?

0 голосов
/ 22 мая 2018

Поиск руководства с использованием redux-token-auth .Выдача этого типа Ошибка:

Ошибка

Все примеры создателей включают в себя вызовы из класса Component следующим образом: 

// EXAMPLE: components/SignInScreen.jsx
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { signInUser } from '../redux-token-auth-config' // <-- note this is YOUR file, not the redux-token-auth NPM module

class SignInScreen extends Component {
  constructor (props) { ... }

  ...

  submitForm (e) {
    e.preventDefault()
    const { signInUser } = this.props
    const {
      email,
      password,
    } = this.state
    signInUser({ email, password }) // <-<-<-<-<- here's the important part <-<-<-<-<-
      .then(...)
      .catch(...)
  }

  render () {
    const { submitForm } = this
    <div>
      <form onSubmit={submitForm}>...</form>
    </div>
  }
}

export default connect(
  null,
  { signInUser },
)(SignInScreen)

Isвозможно ли переместить вызовы в файл действий?В документации он упоминает, что

registerUser, signInUser и signOutUser являются действиями Redux Thunk и, таким образом, при подключении через mapDispatchToProps возвращают Promises.

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

Это моя попытка, которая выдает ошибку: 

// /actions/auth.js
import { signInUser, signOutUser } from '../redux-token-auth-config'

export const Login = (email, password) => {
    return (dispatch) => {
        dispatch(LoginStart());
        signInUser({ email, password })
            .then((response) => dispatch(LoginSuccess(response.data.data)))
            .catch((error) => dispatch(LoginError(error)));
    };
};

export const LoginStart = () => ({
    type: 'LOGIN::START'
});

export const LoginSuccess = (data) => ({
    type: 'LOGIN::SUCCESS',
    payload: data
});

export const LoginError = (error) => ({
    type: 'LOGIN::ERROR',
    payload: error
})

export const Logout = () => {
    return (dispatch) => {
        dispatch(SessionCleanup())
        signOutUser()
            .then((response) => console.log('Success'))
            .catch((error) => console.log(error))
    }
}

export const SessionCleanup = () => ({
    type: 'LOGIN::SESSION_CLEANUP'
})

1 Ответ

0 голосов
/ 06 мая 2019

Предполагая, что вы пытаетесь вызвать Login из компонента, у меня возникла та же проблема, и я исправил ее, выполнив следующее: 

export default connect(state => ({}), { signInUser })(FooBar);

Когда я вызвал действие, я передал signInUser. 

this.props.fooBarBaz(email, password, signInUser);

Это позволило мне использовать signInUser вне компонента, как я это делал внутри него.

Так что в вашем случае это должно быть так же просто, как сохранить: 

export default connect(
  null,
  { signInUser },
)(SignInScreen)

и звонит Login как: 

Login(email, password, signInUser);
...