Question

你介意帮我清楚一下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时，我只能调用类型的操作：LOGIN_REQUEST而不是LOGIN_SUCCESS，LOGIN_FAILURE，当使用mapDispatchToProps时，它可以工作。你能帮我解释一下吗？非常感谢。

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

0 个答案: