Изследване на управлението на състоянието в React с помощта на Jotai: Практическо ръководство

Управлението на състояние в малки по мащаб проекти обикновено е лесно с помощта на кукички и подпори на React. Въпреки това, тъй като приложението се разраства и възниква необходимостта от споделяне и достъп до данни между различни компоненти, това често води до пробивно сондиране. За съжаление, пробивното пробиване може бързо да затрупа кодовата база и да въведе предизвикателства за мащабируемост.

Въпреки че Redux предлага страхотно решение за управление на състоянието, неговият API може да бъде огромен за сравнително малки проекти. За разлика от това, Jotai, минимална библиотека за управление на състояние, която използва за управление независими единици от състояния, наречени атоми състояние, елиминира предизвикателства като пробивно сондиране и позволява по-просто и мащабируемо управление на състоянието Приближаване.

Какво представлява Jotai и как действа?

Джотай е библиотека за управление на състояние, която предлага просто решение за управление на състояние за разлика от по-сложни алтернативи като Redux. Той използва независими единици на състояние, наречени атоми, за да управлява състоянието в приложението React.

В идеалния случай различни компоненти в приложението имат достъп и актуализират тези атоми с помощта на кука, предоставена от Jotai, наречена useAtom. Ето прост пример за това как да създадете атом Jotai:

импортиране {атом} от"джотай";
конст countAtom = atom(1);

За достъп и работа с атоми в Jotai можете просто да използвате useAtom кука, която, както и др Реагирайте куките, ви дава възможност за достъп и актуализиране на стойността на състояние в рамките на функционален компонент.

Ето пример за демонстриране на използването му:

импортиране {useAtom} от"джотай";
конст countAtom = atom(1);
функцияMyComponent() {
конст [count, setCount] = useAtom (countAtom);
конст увеличение = () => setCount((prevCount) => prevCount + 1);
връщане (


Брой: {count}</p>
Увеличаване</button>
 </div>
 );
}

В този пример, useAtom куката се използва за достъп до countAtom атом и свързаната с него стойност. The setCount функцията се използва за актуализиране на стойността на атома и всички свързани компоненти ще бъдат автоматично повторно изобразени с актуализираната стойност.

Като задейства само засегнатите компоненти, той намалява ненужните повторни изобразявания в приложението. Този целенасочен подход към повторното изобразяване подобрява цялостната производителност на приложението.

След като сме изчерпали основите, нека изградим просто приложение To-do React, за да разберем по-добре възможностите на Jotai за управление на състоянието.

Управление на състояние в React с помощта на Jotai

За да започнете, създайте приложение React. Като алтернатива можете използвайте Vite, за да настроите React проект. След като създадете основно приложение на React, продължете и инсталирайте Jotai във вашето приложение.

npm инсталирайте jotai

След това, за да използвате Jotai във вашето приложение, трябва да обвиете цялото си приложение с Доставчик компонент. Този компонент съдържа хранилището, което служи като централен център за предоставяне на атомни стойности в цялото приложение.

Освен това ви позволява да декларирате първоначалното състояние на атомите. Като обвиете приложението си с Доставчик, всички компоненти в приложението получават достъп до атомите, които сте дефинирали, и след това те могат да взаимодействат с и да актуализират състоянието чрез useAtom кука.

импортиране { Доставчик } от"джотай";

Сега увийте приложението в index.js или main.jsx както е показано по-долу.

импортиране Реагирайте от"реагира"
импортиране ReactDOM от'react-dom/клиент'
импортиране Приложение от'./App.jsx'
импортиране'./index.css'
импортиране { Доставчик } от"джотай";
ReactDOM.createRoot(документ.getElementById("корен")).render(



 </Provider>
 </React.StrictMode>,
)

Конфигурирайте хранилище за данни

Магазинът действа като централно хранилище за състоянието на приложението. Обикновено съдържа дефиницията на атоми, селектори и всякакви други свързани функции, необходими за управление на състоянието с помощта на Jotai.

В този случай той управлява атомите за управление на списъка с елементи за приложението To-do. В src директория, съз TodoStore.jsx файл и добавете кода по-долу.

импортиране {атом} от"джотай";
износконст TodosAtom = атом([]);

Чрез създаване и експортиране на TodosAtom, можете удобно да взаимодействате и да актуализирате състоянието на задачите в различните компоненти на приложението.

Внедрете функционалността на приложението To-Do

Сега, след като сте конфигурирали Jotai в приложението React и сте създали атом за управление на състоянието на приложението, отидете напред и създайте прост компонент за задачи, който ще обработва функциите за добавяне, изтриване и редактиране на задачите елементи.

Създайте нов компоненти/Todo.jsx файл в src указател. В този файл добавете кода по-долу:

1. Импортирайте хранилището на данни и useAtom кука.

   импортиране Реагирайте, {useState} от"реагира";
   импортиране {TodosAtom} от„../TodoStore“;
   импортиране {useAtom} от"джотай";

2. Създайте функционалния компонент и добавете JSX елементите.

   конст Todo = () => {
   
   връщане (
   
   
    заместител =„Нова задача“
    стойност={стойност}
    onChange={event => setValue (event.target.value)}
    />
   Добавете Todo</button>
   
   
    {todos.map(да направя => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Изтриване</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };