Javascript 使用mapDispatchToProps和不使用之间的区别？

你能帮我弄清楚mapDispatchToProps吗。 我有这样一个示例代码：

// ----------------------- 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,
        }))
      );
    }
}

/--------------------------不使用mapDispatchToProps-----------------------------
//变量onSubmit=（事件）=>{
//event.preventDefault（）
//var email=event.target.elements[0]。value
//var password=event.target.elements[1]。value
////常量路径=`/repos/${userName}/${repo}`
//store.dispatch（action.requestLogin（{username:email，password:password}））
////store.dispatch（action.receiveLogin（{user{username:email，password:password，objectId:1，sessionToken:“asdfg”}}））
// }
//--------------------------使用mapDispatchToProps-----------------------------
const mapDispatchToProps=（调度）=>{
返回{
onSubmit：（事件）=>{
event.preventDefault（）
var email=event.target.elements[0]。value
var password=event.target.elements[1]。value
分派（action.requestLogin（{用户名：电子邮件，密码：密码}））
}
}
}
常量mapStateToProps=状态=>({
//onSubmit:onSubmit，
错误：state.login.error
});
var LoginPage=（{onSubmit，error}）=>{
返回(
`
`
)
}
导出默认连接（mapStateToProps、mapDispatchToProps）（登录页面）
//-----------------------------这是减速器-------------------------------------
导出默认函数登录（状态={
logedAt:null，
isLogging:错误，
错误：null，
数据：{}，
}，行动）{
开关（动作类型）{
案例类型.LOGIN\u请求：
返回更新（状态{
isLogging:{$set:true}，
错误：{$set:null}
});
case types.LOGIN\u成功：
返回更新（状态{
数据：{$set:action.body}，
isLogging:{$set:false}，
logedAt:{$set:action.logedAt}，
});
案例类型。登录失败：
返回更新（状态{
logedAt:{$set:null}，
错误：{$set:action.error}，
});
违约：
返回状态；
}
}
//-----------------------------以及中间件-------------------------------------
导出函数登录（{dispatch，getState}）{
返回下一步=>action=>{
返回callLogin（）。然后(
response=>dispatch（Object.assign（{}）{
主体：回应，
logedAt:Date.now（），
类型：登录成功，
isFetching:false，
我证实：是的，
//callLogin:callLogin，
})),
error=>dispatch（Object.assign（{}）{
错误：error.response.text，
类型：登录失败，
isFetching:false，
I认证：错误，
//callLogin:callLogin，
}))
);
}
}

当我不使用mapDispatchToProps时，我只可以发送类型为：LOGIN\u REQUEST的操作，但不发送LOGIN\u SUCCESS、LOGIN\u FAILURE的操作，当使用mapDispatchToProps时，它可以工作。你能给我解释一下吗 非常感谢