바인딩 후 MapDispatchtoProps this.props를 사용할 수 없습니다

Question

나는 내 코드에서 무엇이 잘못되었는지 알아 내려고합니다. 누군가 내가 무엇이 잘못되었는지 찾아내는 것을 도울 수 있습니까? 나는 텍스트 편집을 위해 webstorm을 사용하며, "unresolve variable"은

this.props.loginUser(value);

과 관련이 있습니까? 이 내 액션 코드가

import React, { Component } from 'react' 
import {reduxForm, Field} from 'redux-form'; 
import { loginUser } from '../actions/index'; 
import { Stores } from '../Stores'; 
import {connect} from 'react-redux'; 

const validate = values => { 
    const errors = {}; 
    if (!values.email) { 
     errors.email = 'Required' 
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) { 
     errors.email = 'Invalid email address' 
    } 
    if (!values.password) { 
     errors.password = 'Required' 
    } 
    return errors 
}; 

const renderField = ({ input, label, type, meta: { touched, error } }) => (
    <div> 
     <label>{label}</label> 
     <div> 
      <input {...input} placeholder={label} type={type} className="form-control"/> 
      {touched && error && <span className="alert alert-danger">{error}</span>} 
     </div> 
    </div> 
); 

function submit(value){ 
    console.log(value); 
    this.props.loginUser(value); //didn't work 
    // Stores.dispatch(loginUser({email,password})); //this method work 
} 

class LoginV6 extends Component{ 

    render() { 
     const {handleSubmit, pristine, reset, submitting} = this.props; 

     return (
      <div className="row"> 
       <div className="col-md-6"> 

        <form onSubmit={handleSubmit(submit)}> 
         <div className="form-group"> 
          <Field 
           name="email" 
           type="text" 
           component={renderField} 
           label="Email" 
          /> 
         </div> 

         <div className="form-group"> 
          <Field 
           name="password" 
           type="password" 
           component={renderField} 
           label="Password" 
          /> 
         </div> 

         <div> 
          <button type="submit" className="btn btn-primary" disabled={pristine||submitting}> 
           Login 
          </button> 

          <button type="button" className="btn btn-primary" disabled={pristine || submitting} 
            onClick={reset}> 
           Clear Values 
          </button> 
         </div> 
        </form> 

       </div> 
      </div> 
     ) 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     loginUser() { 
      dispatch({loginUser(value)); 
     } 
    } 
}; 

function mapStateToProps(state) { 
    return { 
     errorMessage: state.auth.error, 
     authenticated:state.auth.authenticated 
    } 
} 

LoginV6 = reduxForm({ 
    form:'LoginV6', 
    validate 
})(LoginV6); 

export default LoginV6 = connect(mapStateToProps, mapDispatchToProps)(LoginV6); 

입니다 :

이

내 코드입니다

import axios from 'axios'; 
import jwtdecode from 'jwt-decode'; 
import {browserHistory} from 'react-router'; 
import { 
    AUTH_USER, 
    AUTH_ERROR, 
    USER_INFO_SUCCESS, 
    USER_INFO, 
    LOGOUT_USER, 
    GET_TABPANEL, 
    GET_SETUP_TABTITLES, 
} from './types'; 

const ROOT_URL = 'http://localhost:8000'; 

// User and Auth actions 
// 
export function loginUser({email,password}){ 
    return function(dispatch){ 
     axios.post(`${ROOT_URL}/api/auth/login`,{email,password}) 
      .then(response => { 
       dispatch({type: AUTH_USER, 
        payload:response.data.token 
       }); 
       localStorage.setItem('laravel_user_token',response.data.token); 
       console.log('Login Success'); 
       browserHistory.push("/"); 
      }).catch(()=>{ 
      dispatch(authError("Empty Required Field")); 
     }); 
    } 
} 

내가 사용하는 경우 Stores.dispatch (loginUser (값)); 작동합니다. 이 같은

Answer 1

변경 코드 :

class LoginV6 extends Component{ 
    constructor(){ 
     this.submit = this.submit.bind(this); //Because ES6 is not auto bind 
    } 
    submit(value){ 
     //...your code 
     this.props.loginUser(value); //it will work 
     // or "loginUser" is an action 
     this.props.dispatch(loginUser(value)); //see the new function mapDispatchToProps 
    } 
    render(){ 
     //...your code 
    } 
} 
// .... 
// instead map a new object, we map dispatch directly 
// with this function, we avoid duplicated/confused about actions in case you have many actions 
const mapDispatchToProps = (dispatch) => { 
    return { 
     dispatch 
    } 
}; 

Answer 2

이미이에 의해이 내 코드를 변경 수정 :

class LoginV6 extends Component{ 

    submit = (data) => { 
     console.log(data); 
     this.props.loginUser(data); 
    } 

    render() { 
     const {handleSubmit, pristine, reset, submitting} = this.props; 

     return (
      <div className="row"> 
       <div className="col-md-6"> 

        <form onSubmit={handleSubmit(this.submit)}> 

..............................the rest of code.............................................. 

    const mapDispatchToProps = (dispatch) => { 
     return { 
      loginUser: (data) => { 
       dispatch(loginUser(data)) 
      } 
     } 
    } 

    function mapStateToProps(state) { 
     return { 
      errorMessage: state.auth.error, 
      authenticated:state.auth.authenticated 
     } 
    } 

    LoginV6 = reduxForm({ 
     form:'LoginV6', 
     validate 
    })(LoginV6); 

    export default LoginV6 = connect(mapStateToProps, mapDispatchToProps)(LoginV6);