Расширенные шаблоны Redux: реализация Redux Toolkit в вашем приложении React

Сегодня мы углубимся в реализацию Redux Toolkit в вашем приложении React. Redux Toolkit, как мы обсуждали в предыдущих руководствах, представляет собой пакет, предназначенный для упрощения распространенных вариантов использования Redux. Он предоставляет служебные функции, которые помогают сократить шаблонный код, связанный с Redux.

Мы начнем с простого примера и постепенно будем вводить сложные шаблоны.

Создание магазина Redux с помощью Redux Toolkit

В Redux Toolkit мы используем configureStore для создания хранилища вместо createStore. Эта функция принимает объект конфигурации, в котором мы можем указать наши редукторы, промежуточное ПО и энхансеры.

Начнем с создания простого хранилища с фиктивным редюсером.

import { configureStore } from '@reduxjs/toolkit';

const reducer = (state = {}, action) => state;

const store = configureStore({
  reducer: reducer,
});

console.log(store.getState());

В этом примере мы настраиваем хранилище Redux, используя configureStore. Мы предоставляем простую функцию-редуктор, которая возвращает состояние как есть, независимо от отправленного действия. Если мы запишем store.getState(), то получим пустой объект {}, потому что это начальное состояние, которое возвращает наш редьюсер.

Упрощение действий и редукторов с помощью createSlice

Одним из основных преимуществ Redux Toolkit является функция createSlice. Эта функция генерирует создателей действий и типы действий, которые соответствуют определяемым нами редукторам и состоянию.

import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1,
  },
});

const store = configureStore({
  reducer: counterSlice.reducer,
});

console.log(store.getState()); // Output: 0
store.dispatch(counterSlice.actions.increment());
console.log(store.getState()); // Output: 1

В этом коде мы определяем часть нашего хранилища Redux, используя createSlice. Объект counterSlice включает в себя автоматически сгенерированные создатели действий и функцию редуктора. Затем мы используем этот фрагмент при создании нашего магазина Redux. Затем мы можем отправлять действия с помощью сгенерированных создателей действий, что приводит к обновлениям в нашем магазине.

Обработка асинхронных операций с помощью createAsyncThunk

Redux Toolkit также упрощает обработку асинхронных операций с помощью createAsyncThunk. Эта функция создает преобразователь Redux, который отправляет действия для указания жизненного цикла асинхронной операции.

import { configureStore, createSlice, createAsyncThunk } from '@reduxjs/toolkit';

const fetchUserById = createAsyncThunk(
  'users/fetchById',
  async (userId, thunkAPI) => {
    const response = await fetch(`https://reqres.in/api/users/${userId}`);
    return response.data;
  }
);

const usersSlice = createSlice({
  name: 'users',
  initialState: { entities: [], loading: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchUserById.fulfilled, (state, action) => {
      state.entities.push(action.payload);
    });
  },
});

const store = configureStore({
  reducer: {
    users: usersSlice.reducer,
  },
});

store.dispatch(fetchUserById(1));

В этом примере мы определяем асинхронный преобразователь fetchUserById, который извлекает пользователя по его идентификатору. Затем мы определяем usersSlice нашего магазина Redux. Этот фрагмент реагирует на действие, отправленное, когда обещание, возвращенное fetchUserById, выполнено. Он обновляет поле entities своего состояния, нажимая на полученного пользователя.

Вот и все! Теперь вы узнали, как использовать Redux Toolkit в своем приложении React, делая ваш код Redux более управляемым и читабельным. Помните, что путь обучения и совершенствования никогда не заканчивается. В следующем посте мы еще глубже погрузимся в мир Redux. А пока удачного кодирования!

Если вам понравилась статья и вы хотите выразить свою поддержку, сделайте следующее:

👏 Аплодируйте истории (50 аплодисментов), чтобы эта статья попала в топ

👉Подпишитесь на меня в Среднем

Посмотрите больше контента в моем профиле Medium