Asynchroniczność w Redux

Na ten moment asynchroniczność w aplikacjach wydaje się być nierozłączna. Dlatego podczas korzystania z Redux, decydujemy się na wybór middleware, który pomoże nam obsłużyć tak zwane “side effects”.

Może to być na przykład:

• zapisywanie pliku,
• ustawienie asynchronicznego stopera,
• wysłanie żądania HTTP.

Aktualnie do wyboru mamy dwa najpopularniejsze middleware, które pozwalają nam na tworzenie asynchronicznych akcji: Redux-Saga oraz Redux-Thunk, który poznamy lepiej w poniższym artykule.

Jest to middleware, którego celem jest ułatwienie nam dodania pewnej logiki lub uruchomieniu kodu asynchronicznego przed wysłaniem akcji. Pozwala nam napisać funkcję, która jako argument może przyjmować dispatch oraz getState.

dispatch – jest to metoda służąca do wysyłania akcji, które mogą zostać odebrane przez reducer.

getState – pozwala na uzyskanie danych ze store.

Definicyjnie thunk oznacza:

fragment kodu, który wykonuje pewną opóźnioną pracę.

Inaczej jest to określenie funkcji, która zwraca inną funkcję. W pewnym sensie opóźnia ona wywołanie funkcji zwracanej o określony przedział czasu.

Na samym starcie musimy obsłużyć zdarzenie użytkownika w aplikacji, takie jak kliknięcie przycisku. Następnie wywołujemy dispatch().

Gdy rozpoczęta akcja dotrze do middleware, może wykonać działanie asynchroniczne, a po zakończeniu wysłać rzeczywisty obiekt akcji.

Podczas dodawania logiki asynchronicznej do aplikacji Redux, wykonujemy dodatkowy krok, za pomocą którego middleware będzie mógł wysłać żądanie HTTP do API.

Powyższy schemat przedstawia asynchroniczny przepływ danych w Redux.

Na potrzeby artykułu stworzymy prostą aplikację React, Redux + Redux-Thunk, która będzie wyświetlała filmy. Do tego celu skorzystamy z API ze strony https://www.themoviedb.org/.

npm install redux-thunk

• ./store/index.js

import { configureStore } from '@reduxjs/toolkit'; import moviesReducer from './reducers/movies'; import ReduxThunk from 'redux-thunk'; const middlewares = [ReduxThunk]; const store = configureStore({ reducer: { movies: moviesReducer, }, middleware: middlewares, }); export default store;

• ./store/actions/actionTypes.js

./store/actions/actionTypes.js export const FETCH_MOVIES_START = 'FETCH_MOVIES_START'; export const FETCH_MOVIES_SUCCESS = 'FETCH_MOVIES_SUCCESS'; export const FETCH_MOVIES_ERROR = 'FETCH_MOVIES_ERROR';

• ./store/actions/movies.js

import * as actionTypes from './actionTypes'; export const fetchMoviesStart = () => { return { type: actionTypes.FETCH_MOVIES_START, }; }; export const fetchMoviesSuccess = (movies) => { return { type: actionTypes.FETCH_MOVIES_SUCCESS, payload: movies, }; }; export const fetchMoviesFail = (error) => { return { type: actionTypes.FETCH_MOVIES_ERROR, error: error, }; };

Nadal wysyłamy wartość zwracaną, ale tym razem zamiast obiektu zwraca nam ona funkcję.

Początkowo wywołujemy funkcję dispatch(fetchMoviesStart()) odpowiadającą za rozpoczęcie ładowania się filmów.

Następnie obsługujemy asynchroniczne zapytanie do API, aby pozyskać filmy. Przy użyciu dispatch(fetchMoviesSuccess(movies.results)) przekazujemy dane do store.

setTimeout służy nam do opóźnienia wywołania akcji w celu pokazania efektu ładowania się na interfejsie.

W przypadku wystąpienia błędu wykonuje się dispatch(fetchMoviesFail(error). Za pomocą tej akcji pozyskujemy informacje o błędzie.

Dodatkowo niezależnie czy zapytanie do API się powiedzie, przerywamy ładowanie.

• ./store/actions/movies.js

import * as actionTypes from './actionTypes'; [...] export const fetchMovies = () => { return async (dispatch) => { dispatch(fetchMoviesStart()); try { const apiKey = 'YOUR API KEY'; const data = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}`); const movies = await data.json(); setTimeout(() => { dispatch(fetchMoviesSuccess(movies.results)); }, 1000); } catch (error) { dispatch(fetchMoviesFail(error)); } }; };

• ./store/reducers/movies.js

import * as actionTypes from '../actions/actionTypes'; const initialState = { isLoading: false, movies: null, error: null, }; const moviesReducer = (state = initialState, action) => { switch (action.type) { case actionTypes.FETCH_MOVIES_START: return { ...state, isLoading: true, }; case actionTypes.FETCH_MOVIES_SUCCESS: return { ...state, isLoading: false, movies: action.payload, }; case actionTypes.FETCH_MOVIES_ERROR: return { ...state, isLoading: false, error: action.payload, }; default: return state; } }; export default moviesReducer;

Redux-Thunk to świetne rozwiązanie dla niewielkich aplikacji, które potrzebują narzędzia do obsługi operacji asynchronicznych. Jest to doskonały wybór dla osób dopiero uczących się Redux z uwagi na jego prostą implementację. Gdy już poczujesz się z nim komfortowo, dobrym pomysłem jest wypróbowanie alternatyw takich jak Redux-Saga czy Redux-Observable.

Szukasz pracy, w której możesz rozwijać swoje zainteresowania i na bieżąco zdobywać nowe umiejętności? Sprawdź nasze oferty!