Redux Toolkit: `extraReducers` — важливість і використання

Redux Toolkit — це бібліотека, яка розроблена для того, щоб зробити роботу з Redux легшою та ефективнішою. extraReducers є однією з її ключових особливостей і надає більш гнучке управління станом. У цій статті ми розглянемо, що таке extraReducers, чому це важливо та як його використовувати.

Що таке extraReducers?

extraReducers — це можливість Redux Toolkit, що дозволяє одному slice реагувати на інші action-и або асинхронні операції, що виходять за межі стандартних reducer-ів цього slice. Це дає змогу одному slice керувати action-ами іншого slice або вже визначеними асинхронними операціями.

Важливість використання extraReducers

1. Асинхронне управління станом: Одна з ключових можливостей Redux Toolkit — це createAsyncThunk, що спрощує управління асинхронними операціями. Для зміни стану в процесі асинхронних операцій (наприклад, pending, fulfilled, rejected) використовують extraReducers.
2. Реакція на action іншого slice: Іноді один slice має реагувати на action іншого slice. Це дозволяє створити більш структуровану взаємодію між slice-ами.
3. Гнучкість і модульність: extraReducers дозволяє slice працювати не тільки зі своїми action-ами, а й з action-ами, що визначені в інших частинах застосунку. Це дає змогу створити більш гнучкий та модульний код.
4. Читабельність та легкість у підтримці: Замість того, щоб писати безліч мануальних reducer-ів для асинхронних операцій або інших action-ів, extraReducers дозволяє зробити код більш зрозумілим і організованим.

Використання extraReducers

1. Основне використання:

У наведеному прикладі ми покажемо, як за допомогою асинхронної операції (fetchUsers) отримати список користувачів з API та як управляти станом в процесі цього.

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

// Асинхронна операція: Отримання списку користувачів  
export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {  
 const response = await axios.get('/api/users');  
 return response.data;  
});  

// Опис slice  
const usersSlice = createSlice({  
 name: 'users',  
 initialState: {  
 users: [],  
 status: 'idle', // idle, loading, succeeded, failed  
 error: null,  
 },  
 reducers: {}, // Можна визначити локальні reducer-и тут  
 extraReducers: (builder) => {  
 builder  
 .addCase(fetchUsers.pending, (state) => {  
 state.status = 'loading';  
 })  
 .addCase(fetchUsers.fulfilled, (state, action) => {  
 state.status = 'succeeded';  
 state.users = action.payload; // Зберігаємо список користувачів  
 })  
 .addCase(fetchUsers.rejected, (state, action) => {  
 state.status = 'failed';  
 state.error = action.error.message;  
 });  
 },  
});  

export default usersSlice.reducer;

2. Реакція одного slice на action іншого slice:

import { createSlice } from '@reduxjs/toolkit';  
import { fetchUsers } from './usersSlice'; // Action з іншого slice  

const logsSlice = createSlice({  
 name: 'logs',  
 initialState: [],  
 reducers: {},  
 extraReducers: (builder) => {  
 builder.addCase(fetchUsers.fulfilled, (state, action) => {  
 state.push({  
 message: 'Список користувачів успішно завантажено',  
 timestamp: new Date().toISOString(),  
 });  
 });  
 },  
});  

export default logsSlice.reducer;

Найкращі практики

1. Використовуйте значущі імена для асинхронних action-ів: Обирайте імена для action-ів, які чітко вказують на їх призначення, наприклад, fetchUsers, це покращує розуміння коду.
2. Чітко визначайте стани: Відокремлюйте стани, такі як idle, loading, succeeded, failed, і використовуйте їх послідовно.
3. Додавайте обробку помилок: В обробнику стану rejected ловіть помилки та інформуйте користувача про проблему.
   4.
   Уникайте дублювання коду: Використовуючи структуру builder, можна полегшити прослуховування кількох action-ів.

Результат

Особливість extraReducers у Redux Toolkit є надзвичайно важливою для управління асинхронними операціями та різними action-ами. Ця можливість не лише спрощує управління станом, але й допомагає створити більш модульну структуру застосунку. Використовуючи гнучкість, яку надає extraReducers в Redux, ви можете писати код, який буде більш читабельним і легким у підтримці.

Перекладено з: Redux Toolkit’te extraReducers: Önemi ve Kullanımı