React Wizard Native Native با XSTATE V5

TL ؛

اگر فقط می خواهید کد را ببینید ، اینجا است. و این روابط عمومی با آخرین تغییراتی است که در پست مورد بحث قرار می گیرد.

پیشینه

در یک پست قبلی ، ما احراز هویت را اجرا کردیم. اکنون ، ما باید اطلاعات کاربر دیگری را از طریق جریان ورود به سیستم جمع آوری کنیم. پس از احراز هویت ، کاربران برای تکمیل پروفایل های خود یک فرآیند ثبت نام/پردازنده را طی می کنند.

سلب مسئولیت

برای تراز کردن با API Firebase ، من چند روش به آن اضافه کردم api.ts و موارد موجود را برای شبیه سازی بهتر یک جلسه کاربر واقعی بهبود بخشید. دو انبار وجود دارد: یکی نمایانگر auth جدول ، و سایر فروشگاه ها جزئیات کاربر را تأیید کرده است.

• readFromDb – داده های مربوط به بانک اطلاعاتی ، مشابه اسناد و نمایشگاه های Firestore را می خواند.
• onboard – یک عملکرد ابر را شبیه سازی می کند که کاربران تازه وارد شده را در پایگاه داده ذخیره می کند.

ناوبر جدید

برای پشتیبانی از جریان سوار شدن ، یک جدید onboarding دولت در appMachineبشر یک تغییر کلیدی معرفی یک انتقالی است gettingUser حالت ، که تعیین می کند کاربر مستقیماً به برنامه می رود یا نیاز به ورود به سیستم دارد.

initializing: {
  on: { START_APP: { target: "authenticating" } },
  always: [
    {
      guard: "isUserAuthenticated",
      target: "gettingUser",
    },
    { target: "authenticating" },
  ],
},
authenticating: {
  entry: ["setRefAuthenticating"],
  on: {
    SIGN_IN: {
      target: "gettingUser",
    },
  },
  exit: [stopChild("authenticatingMachine"), "stopRefAuthenticating"],
}
/* ... */
gettingUser: {
  invoke: {
    src: "getUser",
    onDone: [
      {
        guard: {
          type: "isUserOnboarded",
          params: ({ event }) => {
            return { user: event.output.user };
          },
        },
        actions: [
          {
            type: "setUser",
            params: ({ event }) => {
              return { user: event.output.user as User };
            },
          },
        ],
        target: "authenticated",
      },
      {
        target: "onboarding",
      },
    ],
  },
},

توجه به این نکته مهم است (به دنبال اصول Firebase) که احراز هویت و مفاهیم کاربر پردازنده مجزا هستند. در auth جدول همه کاربران معتبر را ذخیره می کند ، در حالی که سوار شدن یک مجموعه جداگانه برای ذخیره کاربران سوار شده با شناسه های AUTH خود ایجاد می کند. این امر بازیابی صحیح داده های کاربر را تضمین می کند.

getUser: fromPromise(async () => {
  const currentUser = getCurrentUser();
  const user = await readFromDb(`users/${currentUser?.uid}`);

  return { user };
}),
signOut: fromPromise(async () => {
  await signOut();
}),

دستگاه سوار شدن

در onboarding خود ماشین خیلی پیچیده نیست. این ساختار مشابه با authenticated دستگاه از سه مرحله تشکیل شده است که هر یک توسط یک صفحه نمایش جداگانه و ماشین کودک نشان داده شده است. این دستگاه ها تخم ریزی می شوند ، در متن ذخیره می شوند و از طریق navigationSubscriber بازیگر
از طرف دیگر ، دو مفهوم جدید را معرفی می کند:

1. ذخیره سازی دستگاه های Step در هنگام حرکت بین صفحه ها ، پایداری حالت را تضمین می کنند.

setRefStepOne: assign({
  refStepOne: ({ spawn, context }) => {
    return (
      context.refStepOne ??
      spawn("onboardingStepOneMachine", {
        id: "onboardingStepOneMachine",
        input: { persistedContext: context.persistedContext?.stepOne },
      })
    );
  },
})

1. دستگاه است parallel، حفظ جداگانه steps وت onboarding دولتها برای نگه داشتن صفحه نمایش های قدم به ایالات خود حتی در حین عملیات ASYNC.

پافشاری

برای تقویت تجربه کاربر ، باید اطمینان حاصل کنیم که از مرحله دقیق که کاربر در آن خاموش است ، از سر گرفته می شود ، حتی اگر برنامه بسته باشد یا به پس زمینه منتقل شود. در حالی که XSTATE پیشرفت های مداوم با نسخه V5 را ارائه می دهد ، راه حل داخلی آن کاملاً با معماری برنامه ما مطابقت ندارد.
به منظور استفاده از .getPersistedSnapshot() روش ، ما باید با استفاده از کل حالت برنامه را در سطح ریشه ذخیره کنیم createActorContextبشر درعوض ، ما یک رویکرد دیگر را اتخاذ می کنیم و کل حالت سوارکاری را در محل ذخیره محلی ذخیره می کنیم و در صورت لزوم ماشین های مرحله را بازسازی می کنیم.
ما به react-native-mmkv برای ذخیره سازی محلی به دلیل عملیات همزمان ، بازیابی حالت را کارآمد می کند. در پایان هر مرحله جادوگر ، ما صرفه جویی می کنیم:

• ورودی کاربر از مرحله.
• شناسه مرحله بعدی.

داده های ذخیره شده از این ساختار پیروی می کنند:

export interface PersistedOnboardingState {
  currentStep: keyof OnboardingParamList;
  stepOne?: StepOneContext;
  stepTwo?: StepTwoContext;
  stepThree?: StepThreeContext;
}

هنگامی که برنامه بازگشایی می شود ، حالت ورود به سیستم از ذخیره محلی بازیابی می شود و به آن اعمال می شود onboardingNavigator دستگاه:

context: () => {
  const persistedOnboardingState = getOnboardingState();

  return {
    refStepOne: undefined,
    refStepTwo: undefined,
    refStepThree: undefined,
    persistedOnboardingState,
  };
},

در currentStep به OnboardingNavigator به عنوان initialRouteName:

<Stack.Navigator
initialRouteName={
  state?.context.persistedOnboardingState?.currentStep ?? "StepOne"
}
screenOptions={{
  header: (props) => {
    return (
      <OnboardingBar
        {...props}
        onGoBackPress={() => {
          actorRef?.send({ type: "GO_BACK" });
        }}
        onLogoutPress={() => {
          actorRef?.send({ type: "SIGN_OUT" });
        }}
      />
    );
  },
}}
>

نوار

از آنجا که فرآیند ورود به سیستم از چندین مرحله تشکیل شده است ، ما به یک روش بصری برای حرکت به جلو و عقب نیاز داریم. برای رسیدگی به ناوبری برای جادوگر سوارکاری ، ما باید گسترش دهیم AppBar مؤلفه با منطق سفارشی.

export function OnboardingBar({
  route,
  onLogoutPress,
  onGoBackPress,
}: OnboardingBarProps) {
  return (
    <Appbar.Header>
      {route.name !== "StepOne" ? (
        <Appbar.BackAction onPress={onGoBackPress} />
      ) : null}
      <Appbar.Content title={"Onboarding"} />
      <Appbar.Action
        icon="logout"
        onPress={() => {
          onLogoutPress();
        }}
      />
    </Appbar.Header>
  );
}

• در دکمه پشتی فقط زمانی نشان داده می شود که کاربر در مرحله اول نباشد.
• در onGoBackPress تماس تلفنی ارسال می کند GO_BACK رویداد به onboardingNavigator دستگاه

هر مرحله سوارکاری GO_BACK به صورت جداگانه ، تصمیم گیری در مورد ادامه داده ها و کدام صفحه برای حرکت به بعدی.

GO_BACK: {
  actions: [
    {
      type: "persistOnboardingStep",
      params: () => {
        return { screen: "StepOne" };
      },
    },
    {
      type: "navigateToOnboardingStep",
      params: () => {
        return { screen: "StepOne" };
      },
    },
  ],
}

نتیجه

پایان

من این سریال ها را با این ایده شروع کردم تا با نسخه جدید XSTATE آزمایش کنم تا بتوانم به راحتی کد کد موجود خود را ارتقا دهم. چند ماه بعد من آنقدر عادت کرده ام که XState V5 را انجام دهم ، که API جدید را به طور کامل در نظر می گیرم. با این وجود ، اگر مجبور شوم یک ویژگی را برجسته کنم ، این خواهد بود input data مکانیسم و ​​اینکه چگونه کار کردن با آن آسان است contextبشر

در پست زیر ، من قصد دارم روی اعتبار سنجی ورودی کار کنم

من این سریال را به عنوان آزمایشی با نسخه جدید XSTATE شروع کردم ، با هدف ارتقاء پایه کد موجود من به آرامی. چند ماه بعد ، من اکنون XSTATE V5 را به طور مناسب به دست می آورم.

اگر مجبور شدم یک ویژگی برجسته را از این قابلیت برجسته کنم ، این می تواند باشد input data مکانیسم و ​​چگونگی یکپارچه سازی آن با contextبشر این امر به طور قابل توجهی مدیریت دولت را ساده تر کرده است.

در پست بعدی ، من به اعتبار ورودی شیرجه می زنم.