Difference between use mapDispatchToProps and not use ?

[redkyo017]

@gaearon Would you mind helping me to be clear about mapDispatchToProps.
I have a example code like this:

// ----------------------- not use mapDispatchToProps -----------------------------
//var onSubmit = (event) => {
//   event.preventDefault()
//   var email = event.target.elements[0].value
//   var password = event.target.elements[1].value
//   // const path = `/repos/${userName}/${repo}`
//   store.dispatch(action.requestLogin({username:email,password:password}))
//   // store.dispatch(action.receiveLogin({user{username:email,password:password,objectId:1,sessionToken:"asdfg"}}))
// }

// ----------------------- use mapDispatchToProps -----------------------------
const mapDispatchToProps = (dispatch) => {
  return {
    onSubmit: (event) => {
      event.preventDefault()
      var email = event.target.elements[0].value
      var password = event.target.elements[1].value
      dispatch(action.requestLogin({username:email,password:password}))
    }
  }
}

const mapStateToProps = state => ({
  // onSubmit: onSubmit,
  error: state.login.error
});

var LoginPage = ({ onSubmit,error }) => {
  return (
`<div className="row">
      <div className="col-md-12">
        <LoginFormComponent className="account-form text-center" title="Log in to Portal" error={error !== null ? error : ""} onSubmit={onSubmit}/>
      </div>
    </div>`
  )
}

export default connect(mapStateToProps,mapDispatchToProps)(LoginPage)

//-----------------------------and this is the reducer -------------------------------------
export default function login(state = {
  logedAt: null,
  isLogging: false,
  error: null,
  data: {},
}, action) {
  switch (action.type) {
    case types.LOGIN_REQUEST:
      return update(state, {
        isLogging: { $set: true },
        error: { $set: null }
      });
    case types.LOGIN_SUCCESS:
      return update(state, {
        data: { $set: action.body },
        isLogging: { $set: false },
        logedAt: { $set: action.logedAt },
      });
    case types.LOGIN_FAILURE:
      return update(state, {
        logedAt: { $set: null },
        error: { $set: action.error },
      });
    default:
      return state;
  }
}

//-----------------------------and the middleware -------------------------------------
export function login({dispatch, getState}){
  return next => action => {
      return callLogin().then(
        response => dispatch(Object.assign({},{
            body: response,
            logedAt: Date.now(),
            type: LOGIN_SUCCESS,
            isFetching: false,
            isAuthenticated: true,
            // callLogin: callLogin,
          })),
        error => dispatch(Object.assign({} ,{
            error: error.response.text,
            type: LOGIN_FAILURE,
            isFetching: false,
            isAuthenticated: false,
            // callLogin: callLogin,
        }))
      );
    }
}

When I don't use the mapDispatchToProps, I just can dispatch the action for type:LOGIN_REQUEST but not the LOGIN_SUCCESS,LOGIN_FAILURE, when use mapDispatchToProps, it work. could you explain for me
Thanks a lot.

[gaearon]

Hi! This is an issue tracker for Redux. StackOverflow is a more appropriate venue for usage questions because questions and answers are more easily searchable there. I’ll close this but please feel free to post a link to a StackOverflow question in this thread.