Ошибка «useDispatch» не экспортируется из «act-redux », когда мы изменили класс на Hooks - PullRequest
Новая
       30

Ошибка «useDispatch» не экспортируется из «act-redux », когда мы изменили класс на Hooks

0 голосов
/ 23 декабря 2019

Я пытаюсь изменить компонент "Вход в систему", реализованный с помощью перехвата с помощью ловушек. но есть ошибка: «useDispatch» не экспортируется из «response-redux». Согласно исследованию, которое я делаю, существует проблема в версиях, установленных в «package.json»

Воткопия кода без зацепок 

import React, { useState } from "react";
import { Button, Form, Icon, Input, message } from "antd";
import { connect } from "react-redux";
import {
  hideMessage,
  showAuthLoader,
  userSignIn,
} from "../appRedux/actions/Auth";
import IntlMessages from "../util/IntlMessages";
import CircularProgress from "../components/CircularProgress/index";

const FormItem = Form.Item;


function SignIn(props){

const [showPassword, setShowPassword] = useState(false);

const handleClickShowPassword = () => {
    setShowPassword(!showPassword);
};


const handleSubmit = (e) => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {       
        props.showAuthLoader();
        props.userSignIn(values);
      }
    });
};

const { getFieldDecorator } = props.form;
const { showMessage, loader, alertMessage } = props;

return (
  <div className="gx-app-login-wrap">
    <div className="gx-app-login-container">
      <div className="gx-app-login-main-content">
        <div className="gx-app-logo-content">
          <div className="gx-app-logo-content-bg">
            <img src="https://via.placeholder.com/272x395" alt='Neature' />
          </div>
          <div className="gx-app-logo-wid">
            <h1><IntlMessages id="app.userAuth.signIn" /></h1>
          </div>
          <div className="gx-app-logo">
            <img alt="example" src={require("assets/images/logo.png")} />
          </div>
        </div>
        <div className="gx-app-login-content">
          <Form onSubmit={handleSubmit} className="gx-signin-form gx-form-row0">
            <FormItem>
              {getFieldDecorator('password', {
                initialValue: "demo#123",
                rules: [{ required: true, message: 'Please input your Password!' }],
              })(
                <Input addonAfter={<Icon type="eye" onClick={handleClickShowPassword} />} type={showPassword ? 'text' : 'password'} placeholder="Password" />
              )}
            </FormItem>

            <FormItem>
              <Button style={{width:"100%"}} type="primary" className="gx-mb-0" htmlType="submit">
                <IntlMessages id="app.userAuth.signIn" />
              </Button>

            </FormItem>
          </Form>
        </div>

        {loader ?
          <div className="gx-loader-view">
            <CircularProgress />
          </div> : null}
        {showMessage ?
          message.error(alertMessage.toString()) : null}
      </div>
    </div>
  </div>
);

}

const WrappedNormalLoginForm = Form.create()(SignIn);


const mapStateToProps = ({ auth }) => {
  const { loader, alertMessage, showMessage, authUser } = auth;
  return { loader, alertMessage, showMessage, authUser }
};

export default connect(mapStateToProps, {
  userSignIn,
  hideMessage,
  showAuthLoader,
})(WrappedNormalLoginForm);

Вот копия кода с зацепками 

  import React, { useState } from "react";
  import { Button, Form, Icon, Input, message } from "antd";
  import { hideMessage,showAuthLoader,userSignIn} from "../appRedux/actions/Auth";
  import IntlMessages from "../util/IntlMessages";
  import CircularProgress from "../components/CircularProgress/index";
  import { useDispatch, useSelector } from "react-redux";

   const FormItem = Form.Item;
   function SignIn(props){
   const dispatch = useDispatch();
   const [showPassword, setShowPassword] = useState(false);

   const handleClickShowPassword = () => {
   setShowPassword(!showPassword);
   };


   const handleSubmit = (e) => {
   e.preventDefault();
   props.form.validateFields((err, values) => {
   if (!err) {       
   dispatch(showAuthLoader());
   dispatch(userSignIn(values));
   console.log(values)
   props.showAuthLoader();
   props.userSignIn(values);
   }
   });
   };

   const { getFieldDecorator } = props.form;
   const { showMessage, loader, alertMessage } = props;

   return (
   <div className="gx-app-login-wrap">
    <div className="gx-app-login-container">
      <div className="gx-app-login-main-content">
        <div className="gx-app-logo-content">
          <div className="gx-app-logo-content-bg">
            <img src="https://via.placeholder.com/272x395" alt='Neature' />
          </div>
          <div className="gx-app-logo-wid">
            <h1><IntlMessages id="app.userAuth.signIn" /></h1>
          </div>
          <div className="gx-app-logo">
            <img alt="example" src={require("assets/images/logo.png")} />
          </div>
        </div>
        <div className="gx-app-login-content">
          <Form onSubmit={handleSubmit} className="gx-signin-form gx-form-row0">
            <FormItem>
              {getFieldDecorator('password', {
                initialValue: "demo#123",
                rules: [{ required: true, message: 'Please input your Password!' }],
              })(
                <Input addonAfter={<Icon type="eye" onClick={handleClickShowPassword} />} type= 
             {showPassword ? 'text' : 'password'} placeholder="Password" />
              )}
            </FormItem>

            <FormItem>
              <Button style={{width:"100%"}} type="primary" className="gx-mb-0" htmlType="submit">
                <IntlMessages id="app.userAuth.signIn" />
              </Button>

            </FormItem>
          </Form> 

        </div>

        {loader ?
          <div className="gx-loader-view">
            <CircularProgress />
          </div> : null}
        {showMessage ?
          message.error(alertMessage.toString()) : null} 
      </div>
    </div>
  </div>
  );
  }

 const WrappedNormalLoginForm = Form.create()(SignIn);

 export default WrappedNormalLoginForm;

package.json 

 "dependencies": {
 "react-redux": "^5.0.7",
 "react-router-dom": "^4.3.1",
 "react-router-redux": "^5.0.0-alpha.9",
 "redux": "^4.0.0",
 "redux-saga": "^0.16.0"
  },

1 Ответ

0 голосов
/ 23 декабря 2019

Попробуйте установить реактив-редукс версии 7 или выше, у меня работала версия 7.1.3, вы найдете ее по этой ссылке: https://github.com/Atiqullah-Naemi/React-Hooks-Redux/blob/master/package.json

...