How should ant-design-pro @ connect be understood?
< H2 > doubts about @ connect of DVA used in ant-design-pro < / H2 >
import { routerRedux } from "dva/router";
import { linkApi } from "../services/api";
import { setAuthority } from "../utils/authority";
import { reloadAuthorized } from "../utils/Authorized";
import { notification } from "antd";
export default {
namespace: "login",
state: {
status: undefined,
},
effects: {
*login({ payload }, { call, put }) {
const response = yield call(linkApi, {
cmd:"tx.web.restful.apis.controllers.services.base.BaseService-sharplogin",
datas:{
username:payload.username,
password:payload.password,
eType:0
},
});
// Login successfully
if (response.state == 200 ) {
yield put({
type: "changeLoginStatus",
payload: response.datas
});
reloadAuthorized();
yield put(routerRedux.push("/"));
}
},
*logout(_, { put, select }) {
try {
// get location pathname
const urlParams = new URL(window.location.href);
const pathname = yield select(state => state.routing.location.pathname);
// add the parameters in the url
urlParams.searchParams.set("redirect", pathname);
window.history.replaceState(null, "login", urlParams.href);
} finally {
yield put({
type: "changeLoginStatus",
payload: ""
});
reloadAuthorized();
yield put(routerRedux.push("/user/login"));
}
},
},
reducers: {
changeLoginStatus(state, { payload }) {
setAuthority(payload);
return {
...state,
status: payload.status,
type: payload.type,
};
},
},
};
({login, loading}) = > ({}) this is a function, which is different from the two parameters of the connect function. How should I understand this writing?
mapStateToPropsstate, ownProps ps:
login:[models/login.js][reducers/changeLoginStatus]
how do you understand login and submitting? do you mean binding submitting to the this.props of a component?
this.props
so how did he trigger the effects in src/models/login.js?
[models/login.js][common/router.js]
[ruotes/User/Login.js][handleSubmit]
submitting.
loading.effects ['login/login'] how should this method be understood?
[model/login.js][*login]bool
talk about the confusion I encountered in this writing at that time. It was that I was too bad to understand the arrow function. I always thought that the arrow function had to write, () = > {. Function body code}, check that if the arrow function returns an object directly, you must put parentheses around the object. Here, the, () = > ({}) of an object is returned directly, which is equivalent to () = > {return {}}. Hope to pay attention to the children's shoes with omissions in the arrow function.
({login, loading}) = > ({}) this is a function, which is different from the two parameters of the connect function. How should I understand this?
{login,loading}--> this is the deconstruction of the assignment .mapStateToProps the first parameter is state .
this writing is equivalent to
login=state.login
loading=state.loading
The functions in
can be directly used with login and loading.
I don't know whether it's right or wrong, but it's right to understand.
according to the previous statement of messycodecc, the following code cannot be explained. There is such a duo in it
.
pages/Dashboard/Workplace.js:@connect(({ user, project, activities, chart, loading }) => ({
