将 redux-token-auth 功能提升到 Action 文件之外？

Question

正在使用 redux-token-auth 寻求指导。引发此类型错误：

Error

所有创建者的示例都涉及从组件 class 进行调用，如下所示：

// 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)

将调用移动到操作文件是否可行？在文档中，他提到

registerUser, signInUser, and signOutUser are Redux Thunk actions and thus, when wired through mapDispatchToProps return 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'
})

Answer 1

假设您正尝试从组件调用 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);

将 redux-token-auth 功能提升到 Action 文件之外？

Lift redux-token-auth Functions Out of View to Action File?

authentication

reactjs

redux

redux-thunk

react-redux