Проблема с входом в Ant Design Pro. Не понимаю код

Question

Я работал с Ant Design Pro. Но я не могу понять модель кода входа. Здесь они используют

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

если вы хотите увидеть полный код, перейдите по этой ссылке.

Здесь вы найдете полный код. Теперь я не понимаю, что означает этот код.

Спасибо

Answer 1

Имя функции со звездочкой означает генератор. Генератор это 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, Точно так же второй объект, который вы передаете, будет нуждаться в вызове и атрибуте put, которые являются функциями.

Сначала он выполняет вызов, передавая fakeAccountLogin и payload, и возвращает функцию, то есть функция приостанавливает работу и отправляет результат вызова во внешнюю область. Когда функция входа в систему возобновляется с помощью .next()function итератора генератора, то, что ему передано, будет присвоено ответу. После этого, put называется, проходя changeLoginStatus как type а также response как payload и результат, если уступил вызывающему function,

Когда .next() итератора этого генератора вызывается, response.status проверяется на 'ok', и если есть совпадение, то reloadAuthorized называется, urlParams инициализируется, а также params, После этого redirect будет инициализирован с params.redirect и это правда, redirectUrlParams инициализируются и произойдут некоторые дальнейшие операции с URL. В любом случае, если есть перенаправление, то функция завершается.

Если response.status было 'ok', но перенаправления не было put называется и результат получается из function конец, когда следующий .next() звонок выдан, function закончится. Если response.status не было 'ok'тогда function закончился намного раньше, а именно, когда внешний if был оценен как ложный.

Вам нужно будет взглянуть на сокращение объектов и массивов в Javascript, а также итераторов и функций генератора. У вас будет трудное время, пока вы не выделите для этого время, поэтому чем раньше вы это сделаете, тем лучше. Я рекомендую Главу 2 и Главу 5 этой книги: https://github.com/getify/You-Dont-Know-JS/tree/master/es6%20%26%20beyond