Estoy tratando de modificar el componente «Iniciar sesión» implementado por redux con ganchos. pero hay un error «‘useDispatch’ no se exporta desde ‘react-redux’. Según la investigación que hago, hay un problema en las versiones instaladas en el» package.json «

Aquí hay una copia del código sin ganchos

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 = () ={amp}gt; { setShowPassword(!showPassword); }; const handleSubmit = (e) ={amp}gt; { e.preventDefault(); props.form.validateFields((err, values) ={amp}gt; { if (!err) { props.showAuthLoader(); props.userSignIn(values); } }); }; const { getFieldDecorator } = props.form; const { showMessage, loader, alertMessage } = props; return ( {amp}lt;div className="gx-app-login-wrap"{amp}gt; {amp}lt;div className="gx-app-login-container"{amp}gt; {amp}lt;div className="gx-app-login-main-content"{amp}gt; {amp}lt;div className="gx-app-logo-content"{amp}gt; {amp}lt;div className="gx-app-logo-content-bg"{amp}gt; {amp}lt;img src="https://via.placeholder.com/272x395" alt='Neature' /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="gx-app-logo-wid"{amp}gt; {amp}lt;h1{amp}gt;{amp}lt;IntlMessages id="app.userAuth.signIn" /{amp}gt;{amp}lt;/h1{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="gx-app-logo"{amp}gt; {amp}lt;img alt="example" src={require("assets/images/logo.png")} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="gx-app-login-content"{amp}gt; {amp}lt;Form onSubmit={handleSubmit} className="gx-signin-form gx-form-row0"{amp}gt; {amp}lt;FormItem{amp}gt; {getFieldDecorator('password', { initialValue: "demo#123", rules: [{ required: true, message: 'Please input your Password!' }], })( {amp}lt;Input addonAfter={{amp}lt;Icon type="eye" onClick={handleClickShowPassword} /{amp}gt;} type={showPassword ? 'text' : 'password'} placeholder="Password" /{amp}gt; )} {amp}lt;/FormItem{amp}gt; {amp}lt;FormItem{amp}gt; {amp}lt;Button style={{width:"100%"}} type="primary" className="gx-mb-0" htmlType="submit"{amp}gt; {amp}lt;IntlMessages id="app.userAuth.signIn" /{amp}gt; {amp}lt;/Button{amp}gt; {amp}lt;/FormItem{amp}gt; {amp}lt;/Form{amp}gt; {amp}lt;/div{amp}gt; {loader ? {amp}lt;div className="gx-loader-view"{amp}gt; {amp}lt;CircularProgress /{amp}gt; {amp}lt;/div{amp}gt; : null} {showMessage ? message.error(alertMessage.toString()) : null} {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); } const WrappedNormalLoginForm = Form.create()(SignIn); const mapStateToProps = ({ auth }) ={amp}gt; { const { loader, alertMessage, showMessage, authUser } = auth; return { loader, alertMessage, showMessage, authUser } }; export default connect(mapStateToProps, { userSignIn, hideMessage, showAuthLoader, })(WrappedNormalLoginForm); 

Aquí hay una copia del código con ganchos

  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 = () ={amp}gt; { setShowPassword(!showPassword); }; const handleSubmit = (e) ={amp}gt; { e.preventDefault(); props.form.validateFields((err, values) ={amp}gt; { 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 ( {amp}lt;div className="gx-app-login-wrap"{amp}gt; {amp}lt;div className="gx-app-login-container"{amp}gt; {amp}lt;div className="gx-app-login-main-content"{amp}gt; {amp}lt;div className="gx-app-logo-content"{amp}gt; {amp}lt;div className="gx-app-logo-content-bg"{amp}gt; {amp}lt;img src="https://via.placeholder.com/272x395" alt='Neature' /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="gx-app-logo-wid"{amp}gt; {amp}lt;h1{amp}gt;{amp}lt;IntlMessages id="app.userAuth.signIn" /{amp}gt;{amp}lt;/h1{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="gx-app-logo"{amp}gt; {amp}lt;img alt="example" src={require("assets/images/logo.png")} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="gx-app-login-content"{amp}gt; {amp}lt;Form onSubmit={handleSubmit} className="gx-signin-form gx-form-row0"{amp}gt; {amp}lt;FormItem{amp}gt; {getFieldDecorator('password', { initialValue: "demo#123", rules: [{ required: true, message: 'Please input your Password!' }], })( {amp}lt;Input addonAfter={{amp}lt;Icon type="eye" onClick={handleClickShowPassword} /{amp}gt;} type= {showPassword ? 'text' : 'password'} placeholder="Password" /{amp}gt; )} {amp}lt;/FormItem{amp}gt; {amp}lt;FormItem{amp}gt; {amp}lt;Button style={{width:"100%"}} type="primary" className="gx-mb-0" htmlType="submit"{amp}gt; {amp}lt;IntlMessages id="app.userAuth.signIn" /{amp}gt; {amp}lt;/Button{amp}gt; {amp}lt;/FormItem{amp}gt; {amp}lt;/Form{amp}gt; {amp}lt;/div{amp}gt; {loader ? {amp}lt;div className="gx-loader-view"{amp}gt; {amp}lt;CircularProgress /{amp}gt; {amp}lt;/div{amp}gt; : null} {showMessage ? message.error(alertMessage.toString()) : null} {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); } 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" }, 

Intente instalar react-redux versión 7 o superior, la versión 7.1.3 funcionó para mí, lo encuentra en este enlace: https://github.com/Atiqullah-Naemi/React-Hooks-Redux/blob/master/package.json