Zarządzanie stanem w aplikacjach – Redux czy Context API?

W dzisiejszych czasach,gdy rozwój aplikacji internetowych nabiera tempa,wybór odpowiednich narzędzi do zarządzania stanem staje się kluczowy dla każdego programisty.Dwa najpopularniejsze rozwiązania, które zyskały szerokie uznanie w społeczności React, to Redux oraz Context API. Każde z nich ma swoje unikalne cechy, zalety i wady, które mogą zasadniczo wpłynąć na wydajność oraz wrażenia użytkowników. W artykule tym przyjrzymy się szczegółowo obu podejściom, analizując ich zastosowania, scenariusze, w których sprawdzają się najlepiej, oraz aspekty, które warto wziąć pod uwagę podczas podejmowania decyzji o wyborze odpowiedniego narzędzia do zarządzania stanem w aplikacji. zastanowimy się, kiedy warto sięgnąć po siłę i elastyczność Redux, a kiedy prostota i wygoda Context API mogą okazać się wystarczające. Zapraszam do lektury!

Zarządzanie stanem w aplikacjach

Zarządzanie stanem aplikacji jest kluczowym aspektem, którego ignorowanie może prowadzić do chaosu w kodzie oraz trudności w utrzymaniu projektu. Wybór odpowiedniego narzędzia do tego zadania często sprowadza się do wyboru między Redux a Context API, które każda z poszczególnych opcji oferuje unikalne rozwiązania.

Redux to potężna biblioteka do zarządzania stanem,charakteryzująca się cenionym wzorcem „flux”. Oto kilka jej kluczowych cech:

• Centralizacja stanu – cały stan aplikacji przechowywany jest w jednym miejscu, co ułatwia debugowanie.
• Precyzyjne zarządzanie danymi – dzięki systemowi akcji i reduktorów, zmiany w stanie są kontrolowane i przewidywalne.
• Świetne narzędzia deweloperskie – Redux DevTools umożliwiają podgląd zmian stanu w czasie rzeczywistym.

Context API, z drugiej strony, jest wbudowanym mechanizmem Reacta, który umożliwia wydajne przekazywanie danych przez drzewo komponentów. Jego zalety obejmują:

• Brak dodatkowych zależności – korzystając z Context API, nie musisz instalować zewnętrznych bibliotek.
• Prostsze API – ogranicza się do dwóch komponentów: context Provider i Context Consumer.
• Wydajność – idealny do zarządzania stanem, który nie wymaga złożonych operacji.

Warto dokonać porównania obu rozwiązań w kontekście różnych scenariuszy aplikacyjnych. Poniższa tabela zestawia kluczowe różnice między nimi:

Decyzja pomiędzy wyborem Redux a Context API powinna być uzależniona od specyfiki projektu i jego wymagań. Jeśli pracujesz nad dużą aplikacją, która wymaga skomplikowanego zarządzania stanem, Redux może być bardziej odpowiednim wyborem. Z kolei dla prostszych aplikacji lub funkcji, gdzie wymagane są tylko sporadyczne aktualizacje, Context API może być wystarczające i bardziej elegantne.

Dlaczego warto dbać o zarządzanie stanem

W dzisiejszych czasach, gdy aplikacje webowe stają się coraz bardziej złożone, zarządzanie stanem odgrywa kluczową rolę w zapewnieniu ich wydajności i responsywności. Przemyślane podejście do tej kwestii może przynieść wiele korzyści,zarówno dla programistów,jak i dla użytkowników finalnych.

Oto kilka powodów, dla których warto zwrócić szczególną uwagę na zarządzanie stanem w swojej aplikacji:

• Ułatwione debugowanie: dobrze zorganizowane zarządzanie stanem sprawia, że problemów w kodzie można szukać z większą łatwością. Możliwość śledzenia zmian w czasie rzeczywistym pozwala na szybsze identyfikowanie i rozwiązywanie błędów.
• Lepsza organizacja kodu: Wykorzystanie bibliotek takich jak Redux lub Context API pomaga w separacji logiki zarządzania stanem od komponentów UI. To z kolei prowadzi do czystszej i bardziej zrozumiałej struktury kodu.
• Optymalizacja wydajności: Dzięki właściwemu zarządzaniu stanem, aplikacje mogą działać płynniej. Właściwe mechanizmy aktualizacji danego stanu minimalizują liczbę niepotrzebnych renderów komponentów, co przekłada się na lepsze doświadczenia użytkowników.
• Skalowalność: W miarę rozwijania się projektu, zarządzanie stanem staje się kluczowe dla zachowania porządku. Dzięki solidnej architekturze można łatwo dodawać nowe funkcjonalności bez ryzyka rozregulowania całej aplikacji.

Warto również zwrócić uwagę na różnorodność podejść do zarządzania stanem. Poniżej przedstawiamy krótką tabelę,która porównuje podstawowe cechy Redux i Context API:

Podsumowując,dbałość o odpowiednie zarządzanie stanem to inwestycja,która przynosi wymierne korzyści dla projektów w dłuższej perspektywie. Wybór odpowiedniej metody, takiej jak Redux czy Context API, powinien być przemyślany i dostosowany do specyfiki danego projektu.

zarządzanie stanem a wydajność aplikacji

Wydajność aplikacji jest kluczowym czynnikiem, który wpływa na doświadczenia użytkowników. W kontekście zarządzania stanem, działanie aplikacji zależy od sposobu, w jaki stan jest przechowywany i aktualizowany. W szczególności wybór pomiędzy bibliotekami takimi jak Redux a Context API może mieć znaczący wpływ na to, jak szybko i efektywnie aplikacja reaguje na zmiany stanu.

Kiedy mówimy o Reduxie, jego architektura bazuje na centralnym magazynie stanu, co pozwala na przewidywalne zarządzanie danymi. Działa to doskonale w sytuacjach, gdy aplikacja ma dużą ilość danych, a jednocześnie potrzebuje ich dynamicznej synchronizacji. Dzięki zastosowaniu wzorca programowania, jakim jest „flux”, Redux umożliwia:

• Efektywne aktualizacje stanu – only changes trigger re-renders.
• Łatwe śledzenie zmian – dzięki loggingowi i narzędziom do debugowania.
• Skalowalność – idealny dla dużych aplikacji z wieloma komponentami.

W przeciwieństwie do tego, Context API oferuje bardziej prostą i mniej zasobochłonną alternatywę. Jest to doskonały wybór dla mniejszych aplikacji lub tych, które nie wymagają skomplikowanego zarządzania stanem. Context API jest bardziej przejrzyste i łatwiejsze w użyciu, co sprawia, że staje się atrakcyjnym rozwiązaniem dla wielu programistów:

• Łatwość użycia – wystarczą tylko kilka linijek kodu.
• Niższe obciążenie – brak dodatkowych bibliotek zwiększa wydajność.
• Naturalne współdziałanie z komponentami reacta.

Wybór pomiędzy Reduxem a Context API zależy głównie od wymagań konkretnej aplikacji oraz preferencji zespołu deweloperskiego. Ostatecznie, kluczem do utrzymania wydajności aplikacji jest zrozumienie, w jaki sposób stan wpływa na renderowanie komponentów oraz jak najlepiej zorganizować przepływ danych w całym projekcie.

Czym jest redux i do czego służy

Redux to biblioteka JavaScript, która jest szeroko stosowana do zarządzania stanem aplikacji, szczególnie tych zbudowanych w oparciu o React. Jej głównym celem jest uproszczenie procesu dzielenia się stanem pomiędzy różnymi komponentami oraz utrzymanie porządku w bardziej skomplikowanych projektach, gdzie zarządzanie danymi może prowadzić do chaosu.

W przeciwieństwie do innych metod, takich jak Context API, Redux wprowadza pojęcie centralnego „store”, w którym przechowywany jest cały stan aplikacji. komponenty mogą się do tego stanu „podłączać”, co umożliwia im odczytywanie danych oraz reagowanie na zmiany. Kluczowe zalety Redux to:

• Jednokierunkowy przepływ danych: Pozwala na lepszą kontrolę nad tym, jak dane są przekazywane i modyfikowane.
• Ścisła struktura: Wymaga zdefiniowania akcji i reducerów, co prowadzi do większej przejrzystości i przewidywalności.
• Wsparcie dla debugowania: redux DevTools umożliwia śledzenie zmian stanu w czasie rzeczywistym, co ułatwia diagnostykę problemów.

Redux jest szczególnie przydatny w aplikacjach,które wykazują złożoną interakcję użytkownika oraz wiele współzależnych komponentów. W takich przypadkach tradycyjne podejścia do zarządzania stanem mogą prowadzić do trudnych do zidentyfikowania bugów i nieefektywności.

Poniżej znajduje się porównanie najważniejszych cech Redux i Context API:

Ostatecznie wybór między Redux a Context API powinien być uzależniony od specyfiki projektu. Dla prostszych aplikacji Context API może być wystarczające, jednak w przypadku bardziej złożonych i dużych systemów wykorzystanie Redux może przynieść znaczne korzyści.

Zalety korzystania z Reduxa

Wybór pomiędzy Reduxem a Context API często zależy od skali aplikacji oraz jej wymagań związanych z zarządzaniem stanem.Redux przynosi ze sobą szereg zalet, które mogą uczynić go idealnym rozwiązaniem w wielu sytuacjach.

• Przewidywalność stanu: Stany przechowywane w Reduxie są niezwykle przewidywalne dzięki zastosowaniu jednolitych zasady, gdzie każda zmiana jest opisana przez akcje.
• Centralizacja: Główną zaletą Reduxa jest centralizacja stanu,co ułatwia zarządzanie nim w dużych aplikacjach. Możliwość śledzenia zmian pozwala na łatwiejsze debugowanie.
• Middleware: Redux pozwala na stosowanie middleware, co oznacza, że można łatwo wprowadzać dodatkowe funkcjonalności, takie jak logowanie, asynchroniczne działania czy obsługa błędów.
• Ekosystem: Dzięki bogatemu ekosystemowi bibliotek i narzędzi, Redux jest elastycznym rozwiązaniem, które można dostosować do różnorodnych potrzeb, jak np. Redux-Saga czy Redux-Thunk.
• DevTools: Narzędzie Redux DevTools daje programistom możliwość monitorowania zmian w stanie aplikacji w czasie rzeczywistym, co znacznie ułatwia rozwój i testowanie.

Ponadto, przy większych projektach, gdzie wiele komponentów może wymagać dostępu do tego samego stanu, Redux znacząco upraszcza komunikację między nimi. Zamiast skomplikowanych props drilling, komponenty mogą bezpośrednio subskrybować interesującą ich część stanu globalnego, co znacząco poprawia przejrzystość kodu.

Te cechy sprawiają, że Redux jest doskonałym wyborem w przypadku aplikacji o złożonej architekturze i wielowarstwowej logice stanu, oferując programistom narzędzia do sprawnego zarządzania złożonością aplikacji oraz poprawy doświadczeń użytkowników.

wady Reduxa, które warto znać

Wybór odpowiednich narzędzi do zarządzania stanem aplikacji może być kluczowy dla sukcesu projektu. Redux, mimo swoich licznych zalet, nie jest wolny od pewnych niedogodności, które warto mieć na uwadze:

• Złożoność: Redux może wydawać się zbyt skomplikowany dla niewielkich aplikacji. Wprowadza on dodatkowy poziom złożoności, co może być przytłaczające dla nowych deweloperów.
• Wymagania dotyczące boilerplate: Programiści często narzekają na konieczność pisania dużej ilości kodu boilerplate, co może sprawić, że rozwój stanie się mniej efektywny.
• Przechowywanie stanu: Konfiguracja i zarządzanie stanem w Reduxie mogą wymagać znacznego wysiłku, zwłaszcza w przypadku zmieniających się wymagań projektu.

Oto kilka innych aspektów, które warto rozważyć:

• Learning Curve: Dla nowych deweloperów, krzywa uczenia się Reduxa może być stroma, co może opóźnić postęp w projekcie.
• Debugging: Śledzenie błędów w Reduxie może być bardziej skomplikowane niż w prostszych rozwiązaniach, co może prowadzić do większej frustracji wśród zespołu.

Ostatecznie,każda decyzja o wyborze technologii powinna być dostosowana do specyfiki projektu oraz umiejętności zespołu. Pamiętajmy, że zarówno Redux, jak i Context API mają swoje miejsce w ekosystemie React, a ich odpowiedni dobór może znacząco wpłynąć na wydajność oraz rozwój aplikacji.

context API – prostota i intuicyjność

W świecie Reacta, gdzie zarządzanie stanem jest kluczowym elementem budowy aplikacji, Context API zyskał popularność jako prosty i intuicyjny sposób na dzielenie się danymi w drzewie komponentów. Jego podstawową zaletą jest możliwość łatwego przekazywania danych pomiędzy komponentami bez konieczności ich „przekazywania” przez propsy na każdym poziomie drzewa.

Tworzenie kontekstu w aplikacji jest niezwykle proste.Wystarczy stworzyć kontekst za pomocą React.createContext(),a następnie owinąć komponenty,które chcemy objąć tym kontekstem,w Context.Provider. Dzięki temu, wszystkie komponenty w hierarchii mogą mieć dostęp do tych samych danych. Przykładowo:

const ThemeContext = React.createContext();

const App = () => (
  
    
  
);

Wraz z uproszczeniem zarządzania stanem, Context API oferuje również intuicyjność w użyciu. Nie potrzebujesz zaawansowanej konfiguracji ani zrozumienia złożonych wzorców, które często towarzyszą użyciu Redux. Wystarczy kilka linijek kodu, aby utworzyć kontekst i wykorzystać go w swoich komponentach.

Pomimo tego, że Context API jest niezwykle przydatne, warto zwrócić uwagę na jego ograniczenia. Gdy zasięg kontekstu staje się głęboki, a komponenty wielokrotnie renderują się w odpowiedzi na zmiany stanu, może to prowadzić do problemów z wydajnością. Dlatego kluczowe jest, aby zrozumieć zasady stosowania kontekstu w większych aplikacjach.

Konkretną zaletą jest również możliwość definiowania wielu kontekstów w aplikacji, co pozwala na segmentowanie danych i ich zarządzanie w bardzo elastyczny sposób. Przykład zastosowania różnych kontekstów:

W kolejnych fragmentach rozważań o zarządzaniu stanem w React, warto zadać sobie pytanie: kiedy wybrać Context API, a kiedy przejść na bardziej złożone rozwiązania, takie jak Redux? Odpowiedź nie jest prosta, ale z pewnością warto najpierw bawić się programowaniem z użyciem Context API, aby zobaczyć, jak łatwo można osiągnąć zamierzony cel.

Jak działa Context API w praktyce

Context API to potężne narzędzie w arsenale programistów React, które umożliwia efektywne zarządzanie stanem aplikacji. Jego zastosowanie pozwala na przekazywanie danych przez drzewa komponentów bez konieczności stosowania wielu warstw przekazywania propsów. Jak to działa w praktyce?

Główne założenia Context API obejmują:

• Tworzenie kontekstu: W pierwszej kolejności definiujemy kontekst za pomocą funkcji React.createContext(), co tworzy obiekt kontekstu.
• Provider: Komponent Provider służy do dystrybuowania wartości kontekstu. Otacza on inne komponenty, oznaczając, że mogą one uzyskać dostęp do wartości kontekstu.
• Consumer: Komponenty wewnątrz Provider mogą korzystać z kontekstu poprzez komponent Consumer lub hook useContext.

Przykład definiowania kontekstu:

const MyContext = React.createContext();

Utworzenie Provider umożliwia przekazywanie danych do całego drzewa komponentów:

Wewnątrz komponentów możemy uzyskać dostęp do kontekstu w prosty sposób:

const value = useContext(MyContext);

W kontekście zarządzania stanem,Context API sprawdza się szczególnie dobrze w sytuacjach,gdy:

• stan jest współdzielony przez wiele komponentów.
• Nie jest wymagane zaawansowane przetwarzanie stanu, jak w przypadku zaawansowanych przypadków użycia z biblioteką Redux.
• Trzeba uniknąć „prop drilling”, co znacznie ułatwia utrzymanie i rozwijanie kodu.

Przykładowa tabela ilustrująca porównanie Context API i Redux:

Wybór między context API a Reduxem zależy od specyfiki projektu oraz złożoności stanów,które chcemy zarządzać. W wielu prostszych aplikacjach, Context API może być wystarczające, oferując lekki i zrozumiały sposób na pracę z danymi. Natomiast w bardziej złożonych scenariuszach, warto rozważyć pełniejsze możliwości, które oferuje Redux.

Porównanie architektury Reduxa i Context API

Kiedy wybrać Redux do swojego projektu

Wybór Redux do zarządzania stanem w aplikacji jest często determinowany przez kilka kluczowych czynników. Oto sytuacje, kiedy warto rozważyć jego wdrożenie:

• Złożoność aplikacji: Gdy projekt staje się większy i bardziej złożony, a stan aplikacji wymaga skomplikowanej логики zarządzania, Redux może okazać się idealnym rozwiązaniem.
• Wielokrotne źródła danych: Jeśli Twoja aplikacja integruje się z wieloma zewnętrznymi API lub źródłami danych, Redux pozwala na lepszą kontrolę i organizację stanu.
• Wymagana skalowalność: Aplikacje, które mają rosnąć w przyszłości, mogą skorzystać z dodatkowej struktury i organizacji, którą oferuje Redux, co ułatwi wprowadzanie nowych funkcji.
• Potrzebne narzędzia deweloperskie: Redux posiada bogaty ekosystem narzędzi, takich jak Redux DevTools, które znacznie ułatwiają debuggowanie i monitorowanie stanu aplikacji.

Innym istotnym punktem jest współpraca zespołowa. W przypadku, gdy zespół deweloperski jest duży lub rozproszony, wdrożenie Redux może pomóc w utrzymaniu spójności kodu oraz ułatwić pracę wielu osób nad tym samym stanem aplikacji. Dzięki jasno określonym zasadom i architekturze, każdy członek zespołu będzie mógł łatwo zrozumieć sposób zarządzania stanem.

Warto również wspomnieć, że jeśli aplikacja wymaga intensywnego korzystania z efektywnego zarządzania pamięcią oraz optymalizacji wydajności, Redux zapewnia mechanizmy, które mogą przyczynić się do poprawy responsywności i szybkości działania aplikacji.

Podsumowując,wybór Redux staje się naturalny w sytuacjach,gdy rozwój aplikacji wymaga elastyczności i struktury. rozważając wszystkie powyższe czynniki, można uzyskać jasny obraz, kiedy Redux będzie odpowiednim narzędziem do zarządzania stanem w Twoim projekcie.

Kiedy postawić na Context API

Context API to doskonałe rozwiązanie w przypadku aplikacji, które wymagają mniej zaawansowanego zarządzania stanem. Główne zalety jego stosowania to:

• Prostota użycia – Context API jest łatwy do zrozumienia i wdrożenia, co czyni go idealnym wyborem dla mniejszych projektów.
• Brak dodatkowych zależności – W przeciwieństwie do Redux, Context API jest wbudowane w React, co zmniejsza wagę aplikacji.
• Łatwiejsza integracja z komponentami – nie trzeba wprowadzać skomplikowanych struktur ani działań związanych z middleware.

Warto rozważyć jego zastosowanie,gdy:

• Tworzysz małe lub średnie aplikacje,gdzie skomplikowane zarządzanie stanem nie jest konieczne.
• Potrzebujesz przechowywać proste dane, takie jak motyw, preferencje użytkownika lub inne statyczne wartości.
• Priorytetem są wydajność i szybkość działania bez nadmiernego rozbudowywania kodu.

Kontext API najlepiej sprawdza się w sytuacjach, gdy potrzebujesz dzielić stan pomiędzy niewielką liczbą komponentów lub gdy nie chcesz komplikować struktury projektu. Oto krótkie zestawienie, które może pomóc w podjęciu decyzji:

W sytuacji, gdy Twoja aplikacja się rozwija lub zaczynają się pojawiać wymagania, które przerastają możliwości Context API, warto rozważyć migrację do Redux. Jednak dla małych projektów, które nie potrzebują skomplikowanego systemu zarządzania stanem, Context API może być w pełni wystarczające.

Scenariusze użycia Reduxa

Redux to popularna biblioteka do zarządzania stanem w aplikacjach JavaScript, która ma wiele scenariuszy zastosowania. Oto kilka kluczowych przypadków, w których warto rozważyć wykorzystanie Reduxa:

• Skalowalność aplikacji – Gdy aplikacja rośnie w złożoności, Redux pozwala utrzymać porządek w zarządzaniu stanem.
• Ścisła kontrola nad stanem – redux wprowadza jedno źródło prawdy, co oznacza, że wszystkie dane są przechowywane w jednym miejscu, ułatwiając debugowanie.
• Współpraca z innymi bibliotekami – Redux doskonale integruje się z bibliotekami do routingu, takimi jak React Router, co sprzyja tworzeniu kompaktowych i wydajnych rozwiązań.
• wsparcie dla komponentów UI – Biblioteka umożliwia zarządzanie stanem UI w sposób odseparowany, co pozwala na łatwiejsze testowanie i utrzymanie kodu.
• Obsługa asynchronicznych akcji – dzięki middleware, takim jak redux-thunk czy redux-saga, możliwe jest efektywne zarządzanie akcjami asynchronicznymi, co jest kluczowe w wielu aplikacjach.

Scenariusze zastosowania Reduxa można także przedstawić w formie tabeli, która uwydatnia różne przypadki użycia oraz ich korzyści:

Oczywiście, wybór pomiędzy Redux a Context API w dużej mierze zależy od specyfiki projektu. Redux może być idealnym rozwiązaniem dla bardziej złożonych aplikacji, podczas gdy w prostszych przypadkach Context API może prowadzić do szybszego i łatwiejszego wdrożenia.

scenariusze użycia Context API

Zarządzanie stanem a łatwość testowania

W kontekście aplikacji webowych, zarządzanie stanem ma kluczowe znaczenie dla architektury rozwiązania oraz jego wydajności. Wybór pomiędzy Redux a Context API wpływa nie tylko na sposób przechowywania i udostępniania stanu, ale także na *łatwość testowania* komponentów. Poniżej przedstawiam kilka kluczowych aspektów, które warto wziąć pod uwagę.

• Testowanie jednostkowe komponentów z Redux: Ponieważ Redux wymusza stosowanie akcji i reduktorów,testowanie stanu aplikacji staje się bardziej przewidywalne. Akcje oraz reduktory mogą być łatwo mockowane, co pozwala na izolowane testowanie logiki biznesowej. Dodatkowo, istnieje wiele dostępnych bibliotek, które wspierają proces testowania w ekosystemie Redux, co czyni go bardziej elastycznym w tej kwestii.
• Testowanie komponentów z Context API: Kontekst API jest prostszy w użyciu, ale jego natura sprawia, że testowanie może być bardziej skomplikowane. Konieczność tworzenia wrapperów dla komponentów korzystających z kontekstu może skomplikować testy, a zmiany w stanie globalnym mogą prowadzić do nieprzewidywalnych efektów ubocznych w różnych częściach aplikacji.

Dodatkowo, istotne jest, aby pamiętać o różnicach w strukturze danych między tymi dwoma podejściami. W Reduxie, stan jest centralizowany, co często ułatwia jego zarządzanie i testowanie. Z drugiej strony, w przypadku Context API, każdy kontekst może wprowadzać swój własny stan, co może prowadzić do zamieszania w większych aplikacjach.

W związku z tym, podczas wyboru pomiędzy tymi technologiami, warto rozważyć:

Podsumowując, zarówno Redux, jak i Context API mają swoje zalety i wady, jeśli chodzi o zarządzanie stanem i łatwość testowania. Wybór odpowiedniego rozwiązania powinien zależeć od specyfiki projektu, jego rozmiaru oraz potrzeb zespołu developerskiego. Warto również zainwestować w odpowiednie narzędzia i biblioteki, które ułatwią testowanie komponentów, niezależnie od wybranej technologii.

Integracja Reduxa z innymi bibliotekami

Integracja Context API z komponentami react

export const ADD_ITEM = 'ADD_ITEM';
export const addItem = item => ({
    type: ADD_ITEM,
    payload: item
});

import { ADD_ITEM } from './actions';

const initialState = {
    items: []
};

const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_ITEM:
            return { ...state, items: [...state.items, action.payload] };
        default:
            return state;
    }
};

export default rootReducer;

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

import React from 'react';
import { Provider } from 'react-redux';
import store from './redux/store';
import MyComponent from './MyComponent';

const app = () => (
    
        
    
);

export default App;

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addItem } from './redux/actions';

const MyComponent = () => {
    const items = useSelector(state => state.items);
    const dispatch = useDispatch();

    const handleAddItem = () => {
        const newItem = 'example Item';
        dispatch(addItem(newItem));
    };

    return (
        

            Add Item
            

                {items.map((item, index) => (
                    
{item}
                ))}
            
        
    );
};

export default MyComponent;