Redux 没有在功能组件中分派我的操作类型答案

【问题标题】：Redux is not dispatching my action type in a functional ComponentRedux 没有在功能组件中分派我的操作类型
【发布时间】：2021-10-23 23:44:58
【问题描述】：

我正在尝试使用 redux 从头开始创建登录页面，但由于我将组件转换为功能组件，因此我的有效负载没有被分派。我调试了我的后端，它工作正常，我的响应是向我发送 JWT。唯一的问题是有效载荷。这是我的组件：

import { connect } from 'react-redux';
import { signIn } from '../ducks/actions/adminActions'

const Login = (state: any) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const onEmailChange = (event: any) => {
        setEmail(event.target.value)
    };
    const onPasswordChange = (event: any) => {
        setPassword(event.target.value)
    };
    return (
        <div>
            <h4>Email</h4>
            <input type="text" onChange={onEmailChange}/>
            <h4>Password</h4>
            <input type="text" onChange={onPasswordChange}/>

            <button type="submit" onClick={signIn({email, password})}>Submit</button>
        </div>
    );
};
const mapStateToProps = (state: any) => {
    return {
        isSignedIn: state.auth.isSignedIn
    };
};
export default connect(
    mapStateToProps,
    { signIn }
)(Login);

这是我的行动：

import {
  SIGN_IN,
  SIGN_UP
} from "../types";

export const signIn = ({ email, password }: {email: string, password: string,}) => async (dispatch: any) => {
  try {
    const response = await AlleSys.post('/users/login', {email, password});
    dispatch({type: 'SIGN_IN', payload: response.data});
  } catch (err) {
    console.log('ALLESYS - ERROR: Couldnt establish connection with database');
  }
};

这是我的减速器：

import { SIGN_IN, SIGN_UP } from "../actions/types";

const INITIAL_STATE = {
  isSignedIn: null,
  userId: null
};

export default (state = INITIAL_STATE, action: any) => {
  switch (action.type) {
    case 'SIGN_IN':
      return {...state, isSignedIn: true, userId: action.payload};

我所知道的是，正在调用该操作并接收响应，但它没有分派有效负载。此代码适用于基于类的组件。查看我的 redux 调试器，我发现没有调用 reducer。我想我搞砸了 mapDispatchToProps 和 mapStateToProps 中的一些东西。

【问题讨论】：

标签： reactjs redux

【解决方案1】：

我设法解决了。


const Login = (state: any) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const onEmailChange = (event: any) => {
        setEmail(event.target.value)
    };

    const onPasswordChange = (event: any) => {
        setPassword(event.target.value)
    };

    const send = ({email, password} : {email:  string, password: string}) => {
        state.signIn({email, password});
    };

    return (
        <div>
            <h4>Email</h4>
            <input type="text" onChange={onEmailChange}/>
            <h4>Password</h4>
            <input type="text" onChange={onPasswordChange}/>

            <button type="submit" onClick={() => send({email, password})}>Submit</button>
        </div>
    );
};
const mapStateToProps = (state: any) => {
    return {
        isSignedIn: state.auth.isSignedIn
    };
};

export default connect(
    mapStateToProps,
    { signIn }
)(Login);

【讨论】：