如何解决mapDispatchToProps 类型挑战typescript react-redux
我无法弄清楚我的 mapdispatchToProps 的类型。在 SignInComponent const mapdispatchToProps
中检查以下内容。
看起来很简单,因为函数将 signIn() 作为参数,我可以从谁那里获得类型。但是我无法弄清楚。
这是我的 autAction.ts:
import firebase from 'firebase/app'
import { dispatch } from 'react';
type AuthAction = {
type: string,err?: unkNown
}
export const signIn = (credentials: {email:string,password:string}) => {
return (dispatch: dispatch<AuthAction>) => {
firebase.auth().signInWithEmailAndPassword(
credentials.email,credentials.password
).then(() => {
dispatch({ type: 'LOGIN_SUCCESS'})
}).catch((err) => {
dispatch({ type: 'LOGIN_ERROR',err})
});
}
}
这是我的登录组件:
import React,{ BaseSyntheticEvent,Component } from 'react'
import { connect } from 'react-redux';
import { signIn } from '../../store/actions/authActions';
type IConnecteddispatch = {
signIn: typeof signIn
}
interface IMyComponentProps {
signIn: (credentials: {email:string,password:string}) => void;
}
class SignIn extends Component<IMyComponentProps> {
state = {
email:'',password:''
}
handleChange = (e:BaseSyntheticEvent) => {
this.setState({
[e.target.id]: e.target.value
});
}
handleSubmit = (e:BaseSyntheticEvent) => {
e.preventDefault();
//console.log(this.state);
this.props.signIn(this.state);
}
render() {
return (
<div className="container">
<form onSubmit={this.handleSubmit} className="white">
<h5 className="grey-text text-darken-3">Sing In</h5>
<div className="input-field">
<label htmlFor="email">Email</label>
<input type="email" id="email" onChange={this.handleChange}/>
</div>
<div className="input-field">
<label htmlFor="password">Password</label>
<input type="password" id="password" onChange={this.handleChange}/>
</div>
<div className="input-field">
<button className="btn pink lighten-1 z-depth-0">Login</button>
</div>
</form>
</div>
)
}
}
type AuthAction = {
type:string,err?: unkNown
}
const mapdispatchToProps = (dispatch: any): IConnecteddispatch => { //TYPE CHALLENGE HERE.
return {
signIn: (credentials:{ email:string,password:string}) => dispatch(signIn(credentials))
}
}
export default connect<React.FunctionComponent>(null,mapdispatchToProps)(SignIn)
解决方法
试试这个:
import React,{ BaseSyntheticEvent,Component } from 'react'
import { connect } from 'react-redux';
import { signIn } from '../../store/actions/authActions';
interface IMyComponentProps {
signIn: typeof signIn
}
class SignIn extends Component<IMyComponentProps> {
state = {
email:'',password:''
}
handleChange = (e:BaseSyntheticEvent) => {
this.setState({
[e.target.id]: e.target.value
});
}
handleSubmit = (e:BaseSyntheticEvent) => {
e.preventDefault();
//console.log(this.state);
this.props.signIn(this.state);
}
render() {
return (
<div className="container">
<form onSubmit={this.handleSubmit} className="white">
<h5 className="grey-text text-darken-3">Sing In</h5>
<div className="input-field">
<label htmlFor="email">Email</label>
<input type="email" id="email" onChange={this.handleChange}/>
</div>
<div className="input-field">
<label htmlFor="password">Password</label>
<input type="password" id="password" onChange={this.handleChange}/>
</div>
<div className="input-field">
<button className="btn pink lighten-1 z-depth-0">Login</button>
</div>
</form>
</div>
)
}
}
export default connect(null,{ signIn } )(SignIn)
,
如@liamgbs 的回答所示,您的 mapDispatchToProps
并不是真正必要的,但我确实想回答您关于打字稿问题的问题。
mapDispatchToProps
是一个函数,它接受 dispatch
作为参数并返回一个带有键的 props 对象。所以类型本质上是(dispatch: Dispatch)
。
问题是 Dispatch
在这里使用哪个定义,因为多个包有自己的类型。来自 Dispatch
和 react
的 redux
更基本的定义期望 dispatch
只会用普通的 action 对象调用。 signIn
动作创建者的返回值是 dispatch
的函数(“thunk”)。因此,您需要使用 redux-thunk
包中的类型。
{signIn: typeof signIn}
也不完全正确,因为您正在调用 signIn
而不是仅仅返回它。实际接口是您的 IMyComponentProps
,其中 signIn
是一个 void
函数。
import { ThunkDispatch } from "redux-thunk";
interface LoginCredentials {
email: string;
password: string;
}
interface IMyComponentProps {
signIn: (credentials: LoginCredentials) => void;
}
const mapDispatchToProps = ( dispatch: ThunkDispatch<any,never,AuthAction> ): IMyComponentProps => {
return {
signIn: (credentials: LoginCredentials) => dispatch(signIn(credentials))
};
};
令人讨厌的是,ThunkDispatch
要求您设置所有三个泛型。第一个 any
代表您的 redux 状态的类型,因此您可以根据需要将其替换为实际类型。 never
是您未使用的操作创建器中的额外参数。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。