我工作蚂蚁设计亲。但我不明白的登录密码的模型。在这里,他们使用
effects: {
*login({ payload }, { call, put }) {}
}
如果你想看到完整的代码转到此链接Ant Design Pro login model js file
在这里,你会发现完整的代码。现在我不明白的代码是什么意思。
谢谢
带星的函数名意味着generator。发电机是一个function
其运行的进程可以使用yield
关键字被暂停。 yield是发电机和它的调用者之间的双向通信。有了这些知识,让我们来看看函数本身:
*login({ payload }, { call, put }) {
const response = yield call(fakeAccountLogin, payload);
yield put({
type: 'changeLoginStatus',
payload: response,
});
// Login successfully
if (response.status === 'ok') {
reloadAuthorized();
const urlParams = new URL(window.location.href);
const params = getPageQuery();
let { redirect } = params;
if (redirect) {
const redirectUrlParams = new URL(redirect);
if (redirectUrlParams.origin === urlParams.origin) {
redirect = redirect.substr(urlParams.origin.length);
if (redirect.match(/^\/.*#/)) {
redirect = redirect.substr(redirect.indexOf('#') + 1);
}
} else {
window.location.href = redirect;
return;
}
}
yield put(routerRedux.replace(redirect || '/'));
}
},
所述function
预计两个对象作为输入,并将它们简化为参数。你需要传递的第一个参数像{payload: 'something'}
一个对象,这个对象的payload
属性将被映射到function
的参数。同样,你通过第二个对象都需要一个电话,一个放属性,它是功能。
首先,它执行呼叫,传入fakeAccountLogin和有效载荷,并产生的功能,即,功能和暂停通话发送到外范围的结果。当使用发电机,无论是传递给它的迭代器的.next()
function
恢复登录功能将被分配到响应。在此之后,put
被调用,通过changeLoginStatus
作为type
和response
为payload
和结果,如果产生这种function
的调用者。
当这种发电机的迭代器的.next()
叫,response.status是对“OK”检查,如果有匹配,则reloadAuthorized
叫,urlParams
初始化以及params
。在此之后redirect
将params.redirect
被初始化,莫非这就是truey,redirectUrlParams
初始化和一些进一步的URL操作会发生。不管怎么说,如果有一个重定向,那么函数结束。
如果response.status
是'ok'
,但没有重定向,然后put
被调用,其结果是产生出来的时候,下一个function
的号召的.next()
年底,function
将结束。如果response.status
没有'ok'
,那么function
结束得更早,即当外,如果评价是假的。
你需要看一看到减少在Javascript对象和数组以及迭代器和发电机的功能。你将有一个艰难的时间,直到你为这个分配时间,所以越早做越好。我建议第2章和这本书的第5章:https://github.com/getify/You-Dont-Know-JS/tree/master/es6%20%26%20beyond