post

Tworzenie store'a w Redux

Z tej lekcji dowiesz się jak utworzyć store w Redux oraz jak odczytywać jego stan

Drzewo całego stanu aplikacji tworzonych z użyciem Redux przechowywane jest w storze. Store jest to więc serce naszych danych, bez którego nie wykonamy żadnego kroku dalej. By zacząć korzystanie z Reduxa musimy stworzyć store. W tym celu wystarczy skorzystać z funkcji createStore, którą oferuje nam redux:

import { createStore } from "redux";

const initialMovies = {
  movies: ["Rambo III", "Hakerzy", "Matrix"]
};

function movies(state = initialMovies, action) {
  switch (action.type) {
    default:
      return state;
  }
}

const store = createStore(movies);

Wynikiem działania funkcji createStore jest obiekt, który posiada kilka przydatnych w dalszej pracy metod:

  • getState (pobranie aktualnego stanu)
  • dispatch (wywołanie akcji, która powoduje wyprodukowanie nowego aktualnego stanu)
  • subscribe (nasłuchiwanie zmian zachodzących w storze)

Na poniższym nagraniu możecie zobaczyć w praktyce tworzenie store’a w Reduxie.

Kod z tego odcinka: Github

Zadanie domowe: Stwórz store, który posiada początkowe dane. Z użyciem funkcji subscribe i console.log nasłuchuj zmian zachodzących w storze. Wywołaj parę akcji przez dispatch i zobacz czy zmiany wyświetlają się w Twojej konsoli.

Copyright © 2018 - 2024 FULLSTAK Sp. z o.o.