Создайте приложение для подписки по электронной почте - Часть 2: Подключить Zustand

Обзор

Этот учебник представляет собой серию из 3 частей и будет подробно пройтись того, как выполнять управление государством на уровне компонентов с Zustand. Мы покажем, как использовать Zustand тактически релевантным образом, создавая полностью интегрированный компонент React.

Вот разбивка того, что мы будем освещать на протяжении всей серии:

В качестве предостережения каждая часть выше связана с песочницей кода, в комплекте с полностью завершенным кодом разделения для удобства. Чтобы использовать больше всего времени, следуя этому учебному пособию, мы рекомендуем открыть и разбивать песочницу детали в начале раздела на отдельной вкладке. Наш пример песочницы кода может быть вашим «целевым репо». Пока вы заканчиваете каждую часть учебника, ваша цель должна состоять в том, чтобы написать код, который в конечном итоге напоминает цель.

Предварительные условия

Эта часть имеет те же предпосылки, что и Часть 1 Анкет

Наша цель

Frontends может быть упрямой – и огромной головной болью – поэтому давайте попытаемся удалить как можно больше сложности. В этой части учебника мы собираемся исследовать Zustand и создать наши модели данных, создать наш магазин и подключить их к нашему компоненту React, который мы настроили в части 1.

Понимание Зустанд

Zustand является гибкой системой управления государством. Вот как создатели Zustand описывают инструмент:

“Небольшое, быстрое и масштабируемое решение для государственного управления медведями. Имеет удобный API, основанный на крючках, не является Cowerplatey или самоуверенными, но все же достаточно, чтобы быть явным и похожим на поток. Не игнорируйте это, потому что это мило. У него довольно когти, было потрачено много времени, чтобы справиться с общими подводными камнями, такими как страшная проблема с детьми зомби, реагирование параллелизма и потери контекста между смешанными визуализаторами. Это может быть единственный государственный менеджер в пространстве реагирования, который получает все это право ».

Установка Zustand

Чтобы начать подключение Zustand, нам нужно NPM установить Zustand.

npm i zustand

Создание резервного файла

Поскольку мы будем использовать Zustand для динамической загрузки содержимого компонента, мы всегда хотим, чтобы контент резервного копирования был доступен на случай, если есть какие -либо неожиданные данные о загрузке. Мы будем разместить этот резервный контент в нашем Swarkback.js файл.

Отправляйтесь в SRC/Компоненты/Блок электронной почты Папка и добавьте свой Swarkback.js файл здесь. После того, как файл генерируется, добавьте следующий фрагмент кода:

const content = {
  title: "Become smarter in just 5 minutes",
  subTitle:
    "Get the daily email that makes reading the news actually enjoyable. Stay informed and entertained, for free.",
  input: {
    id: "email-input",
    type: "email",
    label: "Email is required please",
    placeholder: "Enter your email",
    variant: "outlined"
  },
  errors: {
    invalidEmail: "We require a valid email",
    empty: "Email is required please"
  },
  button: {
    states: {
      initial: "Submit",
      processing: "Sending request",
      success: "Sent successfully",
      failed: "Failed! Try again."
    }
  }
};

export { content };

Понимание состояний компонента

Мы собираемся контролировать значение кнопки компонента в соответствии с его состоянием. Как только наш компонент загружается, он может быть в одном из следующих четырех состояний 1) начальная 2) обработка 3) успех или 4) не удалось

Добавление логической папки

Отправляйтесь в SRC/Компоненты/Блок электронной почты Папка и создайте логическую папку. Внутри этой папки создайте следующие файлы: Data-Models.js , Flows.js и Store.js Анкет Чтобы все было чистым, важно, чтобы эти три файла существовали независимо. Ваша текущая структура папок должна выглядеть так:

Создание двух наших моделей данных

Модель – это не что иное, как часть данных, которыми мы хотим управлять по всему приложению. Как профессиональное предпочтение, нам нравится отделять модели данных от магазина. Для этого приложения нам понадобятся две модели данных – модель контента и модель загрузки.

Давайте начнем с решения модели контента, которая будет отвечать за заголовок, подзаголовок и текст кнопки. В модели нам понадобится:

содержание
CurrentButtonText
SetButtonText
GetContent (используется для динамического получения контента)
SetContent (используется для обновления внутреннего состояния контента)

Отправляйтесь в src/components/logic/data-models.js Файл и добавьте следующий фрагмент кода:

import { content } from "../fallback";

const initContentModel = (set) => ({
  content,
  currentButtonText: content.button?.states?.initial,
  setButtonText: (buttonText) =>
    set((state) => ({ ...state, currentButtonText: buttonText })),
  getContent: () => {},
  setContent: (content) => {
    set((state) => ({ ...state, content }));
  }
});

export { initContentModel };

В этом коде мы создаем initContentModel Функция, чтобы помочь нам организовать наш магазин Zustand. На этом этапе мы используем контент из Swarkback.js Файл как значение по умолчанию. Позже мы изменим это на динамические данные в учебном пособии.

Пока мы здесь, давайте занялись моделью загрузки, которая будет отвечать за загрузку и обработку. Загрузка используется, когда мы запрашиваем данные с сервера и Обработка используется, когда мы отправляем данные на сервер. В модели нам понадобится:

загрузка
обработка
Setloading
очистка
SetProcessing
Чистая обработка

В том же src/components/logic/data-models.js Файл, разверните файл, используя следующий фрагмент кода:

import { content } from "../fallback";

const initContentModel = (set) => ({
  content,
  currentButtonText: content.button?.states?.initial,
  setButtonText: (buttonText) =>
    set((state) => ({ ...state, currentButtonText: buttonText })),
  getContent: () => {},
  setContent: (content) => {
    set((state) => ({ ...state, content }));
  }
});

const initLoadingModel = (set) => ({
  loading: false,
  processing: false,
  setLoading: () => {
    set((state) => ({ ...state, loading: true }));
  },
  clearLoading: () => {
    set((state) => ({ ...state, loading: false }));
  },
  setProcessing: () => {
    set((state) => ({ ...state, processing: true }));
  },
  clearProcessing: () => {
    set((state) => ({ ...state, processing: false }));
  }
});

export { initContentModel, initLoadingModel };

Создание магазина Zustand

Ради ясности, давайте сначала определим, что на самом деле за магазин, прежде чем делать что -то еще. Согласно Zustand документация , магазины просто крючки. Вот фрагмент на странице NPM:

Теперь мы собираемся создать наш магазин Zustand и добавить наши ранее созданные модели данных. Чтобы сделать это, отправляйтесь в src/components/block/logic/store.js Файл и добавьте следующий фрагмент кода:

import create from "zustand";
import { devtools } from "zustand/middleware";
import { initContentModel, initLoadingModel } from "./data-models";

const [useStore] = create(
  devtools((set) => ({
    ...initContentModel(set),
    ...initLoadingModel(set)
  })),
  "smart-blocks-store"
);

export { useStore };

Мы используем инструменты Dev, чтобы помочь нам с отладкой. Чтобы узнать больше о Zustand Devtools, посетите Документация Zustand о Dev Tools : ‍

Поздравляю! Ваш магазин теперь создан 🎉

Подключение магазина к компоненту

Чтобы подключить магазин к компоненту, он так же просто, как и использование крючка. Возвращайтесь в SRC/Компоненты/Блок электронной почты/Emailblock.js и импортировать Usestore из src/components/block/logic/store.js файл.

Мы будем использовать Usestore Чтобы получить контент, состояние загрузки и состояние обработки.

import React from "react";
import { Box, Text, Heading } from "grommet";
import { TextField } from "@material-ui/core";
import theme from "../../theme";
import Button from "./Button";
import LoadingBlock from "./LoadingBlock";
import { useStore } from "./logic/store";

const { colors } = theme;

const WrapperBox = ({ children }) => (
  
    {children}
  
);

const EmailBlock = () => {
  const [isLoading, isProcessing] = useStore((state) => [
    state.loading,
    state.processing
  ]);

  const [content, currentButtonText] = useStore((state) => [
    state.content,
    state.currentButtonText
  ]);

  return (
    <>
      {isLoading && (
        
          
        
      )}
      {!isLoading && (
        
          
            {content.title}
          
          {content.subTitle}
          
          
        
      )}
    
  );
};

export default EmailBlock;

Тестирование соединения

На этом этапе вы должны увидеть, как текст успешно вытащится из нашего Swarkback.js файл. Мы также можем проверить соединение, установив начальное состояние загрузки на True и подтвердив, что пользовательский интерфейс компонента на самом деле показывает загрузчик скелета.

Создание отправки для кнопки

Теперь, когда у нас есть наш пользовательский интерфейс, полностью подключенный к магазину Zustand, мы можем управлять отправкой кнопок. В качестве предостережения наше профессиональное предпочтение заключается в том, чтобы организовать любое инициированное пользователем событие в Flows.js файл. Это позволит нам перенести состояние кнопки после события пользователя, например, нажмите кнопку:

Давайте создадим Подождите Функция для моделирования сетевой задержки. Внутри Flows.js Файл, добавьте этот фрагмент кода:

const wait = async (time) =>
  new Promise((resolve) => setTimeout(() => resolve(true), time));

В том же файле давайте создадим пустую функцию Используется iSpatchEmailFlow Это вернет асинхронную функцию отправки.

const useDispatchEmailFlow = () => {

  const dispatch = async () => {};

  return dispatch;
}

Как только это будет сделано, обновите использовал ispatchemailflow Функция со следующим кодом:

import { useStore } from "./store";

const wait = async (time) =>
  new Promise((resolve) => setTimeout(() => resolve(true), time));

const useDispatchEmailFlow = () => {
  const [
    setProcessing,
    clearProcessing,
    setButtonText,
    buttonStates
  ] = useStore((store) => [
    store.setProcessing,
    store.clearProcessing,
    store.setButtonText,
    store.content?.button?.states
  ]);

  const dispatch = async () => {
    setProcessing();
    setButtonText(buttonStates?.processing);
    await wait(2000);
    setButtonText(buttonStates?.success);
    await wait(1000);
    setButtonText(buttonStates?.initial);
    clearProcessing();
  };
  return dispatch;
};

export { useDispatchEmailFlow };

Как видите, внутри использования Используется iSpatchEmailFlow Мы используем магазин Zustand, чтобы захватить функции SETProcessing , ClearProcessing , SetButtonText и содержание кнопки. Внутри функции отправки мы моделируем сетевой вызов, используя Подождите функция

Теперь, когда вы нажимаете кнопку, вы должны увидеть кнопку отключена, переходные состояния, затем сбросить. Довольно круто, верно?!

Вывод

Вот и все! В этой части серии вы узнали, как настраивать модели данных, создать хранилище и подключить его к компоненту React.

Отправляйтесь в Часть 3 этого учебника где мы создадим ресурсы данных по логике бэкэнд и микросервиса для нашего веб -приложения. Наша цель будет завершить и развернуть все менее чем за 20 минут.

Вы можете найти приложение, законченное до этого момента на этом Кодовая песочница Анкет

Оригинал: “https://dev.to/buildable/build-an-email-subscription-app-part-2-connect-zustand-1na4”