Ant Design Pro login issue. Not understand the code

Question

I was working Ant Design pro. But i can't understand the model of the login code. Here they use

effects: {
           *login({ payload }, { call, put }) {}
         }

if you wanted to see the full code goto this link Ant Design Pro login model js file

Here you will find the full code. Now I don't understand what that code means.

Thanks

Answer 1

A function name with a star means a generator. A generator is a function whose running process can be paused using the yield keyword. yield is a two-way communication between the generator and its caller. With that knowledge, let's see the function itself:

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

The function expects two objects as input and reduces them to parameters. You need to pass the first parameter as an object like {payload: 'something'} and the payload attribute of this object will be mapped into a parameter of the function. Similarly, the second object you pass will need a call and a put attribute, which are functions.

First it executes call, passing fakeAccountLogin and payload and yields the function, that is, the function pauses and sends the result of call to the outer scope. When the login function is resumed using the .next() function of the iterator of the generator, whatever is passed to it will be assigned to response. After this, put is called, passing changeLoginStatus as type and response as payload and the result if yielded to the caller of this function.

When the .next() of the iterator of this generator is called, response.status is checked against 'ok' and if there is a match, then reloadAuthorized is called, urlParams is initialized as well as params. After this redirect will be initialized with params.redirect and it this is truey, redirectUrlParams are initialized and some further URL operations will happen. Anyways, if there is a redirect, then a function ends.

If response.status was 'ok', but there was no redirect, then put is called and the result is yielded out of the function end when the next .next() call is issued, the function will end. If response.status was not 'ok', then the function ended much earlier, namely when the outer if was evaluated to be false.

You will need to take a look into reducing objects and arrays in Javascript as well as iterators and generator functions. You will have a difficult time until you allocate time for this, so the sooner you do it, the better. I recommend Chapter 2 and Chapter 5 of this book: https://github.com/getify/You-Dont-Know-JS/tree/master/es6%20%26%20beyond