Jak używać plasterka w reakcji-redux

Przegląd

Kiedy zacząłem używać redux w reakcji, poczułem, że to trochę przesada dla idealnej aplikacji internetowej. Musiałem zarządzać wieloma plikami dla każdego modułu. Było tak dużo kodu, który był prawie taki sam i trzeba go było napisać dla każdego modułu, a ja zawsze myślałem, że skoro i tak musimy wielokrotnie pisać ten sam kod, to dlaczego nie został on obsłużony przez redux? Kiedy dowiedziałem się o createSlice, poczułem, że moje modlitwy zostały wreszcie wysłuchane.

Co to jest createSlice

createSlice jest dostarczany z pakietem redux-toolkit . Jest to funkcja, która akceptuje stan początkowy, obiekt pełen funkcji reduktorów oraz „nazwę plastra” i automatycznie generuje kreatory akcji i typy akcji odpowiadające reduktorom i stanowi.

Jak działa createSlice?

1. Załóż sklep Redux z configureStore
   A. configureStore akceptuje funkcję redukującą jako nazwany argument
   b . configureStore automatycznie konfiguruje sklep z dobrymi ustawieniami domyślnymi
2. Podaj sklep Redux do React komponentów aplikacji
   a. Umieść komponent React-Redux <Provider> wokół swojej <App />
   b. Przekaż sklep Redux jako <Provider store={store}>
3. Tworzenie Redux „slice” reduktor z createSlice
   a. Wywołaj createSlice z nazwą ciągu, stanem początkowym i nazwanymi funkcjami reduktora
   b. Funkcje reduktora mogą „zmutować” stan za pomocą Immer
   c. Eksportuj wygenerowany reduktor plasterków i twórców akcji creator
4. Użyj React-Redux useSelector / useDispatch haki w React komponenty
   a. Odczytaj dane ze sklepu za pomocą hooka useSelector
   b. Pobierz funkcję wysyłki z hakiem useDispatch i akcje wysyłki w razie potrzeby

Mój folder src wygląda tak

Najpierw utwórz wycinek modułu za pomocą createSlice. W atrybucie reduktory funkcji createSlice dodaj funkcje, które będą przechowywać logikę biznesową/domenową.

Wyeksportuj reduktor, który otrzymasz z instancji Slice.

Zaimportuj reduktor i przekaż go w globalnym reduktorze sklepu podczas tworzenia sklepu za pomocą configureStore.

Teraz, gdy masz gotowy sklep, możesz go użyć w swojej aplikacji, przekazując go do dostawcy i owijając główny składnik aplikacji przez tego dostawcę.

Dostawca udostępni sklep każdemu składnikowi na każdym poziomie w składniku aplikacji. Teraz użyjemy sklepu w komponencie Licznik. Najpierw musisz pobrać wartość ze sklepu za pomocą haka useSelector

Możemy użyć tej zmiennej count bezpośrednio do wyświetlenia liczby. Teraz zaktualizujemy sklep i do tego będziemy potrzebować akcji, którą można wyeksportować z instancji slice.

Zaimportuj te akcje do komponentu i wyślij żądaną akcję za pomocą funkcji przechwytującej useDispatch. Funkcja useDispatch zwraca instancję typu Dispatch.

Otóż ​​to! Możesz zobaczyć, jak Slice tworzy dla nas reduktory i akcje, które zajmują mniej czasu i mniej kodu w porównaniu z tradycyjną architekturą Redux. Wiemy już, jak stworzyć sklep, wykorzystać dane do wyświetlenia i aktualizacji danych. To był najbardziej podstawowy przykład, aby każdy mógł zrozumieć użycie Slice w ReactJS.

Jeśli chcesz dowiedzieć się więcej na temat reakcji, przeróbki lub wycinków, daj mi znać w komentarzach.

Tutaj, aby wzmocnić społeczność, dzieląc się wiedzą. Śledź mnie i mój zespół, aby potajemnie wiedzieć, co budujemy 😉.