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

Question

Looking for guidance using redux-token-auth. Throwing this Type Error:
Error
All the creators' examples involve making the calls from the Component class like so:
// 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 it feasible to move the calls up to an action file? In documentation, he mentions that
registerUser, signInUser, and signOutUser are Redux Thunk actions and
thus, when wired through mapDispatchToProps return Promises.
I'm digging through the source code, but I can't figure out what changes when the sign in dispatch is mapped via Redux rather than directly imported and called. If anyone is familiar with this extension, any ideas would be much appreciated!
This is my attempt that throws the error:
// /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

Assuming you are trying to call Login from a component I had the same issue and fixed it by doing the following:
export default connect(state => ({}), { signInUser })(FooBar);
When I called the action I passed along signInUser.
this.props.fooBarBaz(email, password, signInUser);
This allowed me to use signInUser outside of the component just as I did within it.
So in your case it should be as simple as keeping:
export default connect(
null,
{ signInUser },
)(SignInScreen)
and calling Login like:
Login(email, password, signInUser);