במאמר זה אנו נדון מה זה Redux, למה אנחנו צריכים אותה ומתי משתמשים בה. לאחר מכן נראה כיצד ליישם Redux Toolkit (הגרסה החדשה) עם TypeScript ב-React.js.
Redux היא ספריית JavaScript פופולרית שמשמשת לניהול מצב / מידע באפליקציה בצורה מסודרת ומובנת (state management). לדוגמה, באתרי E-commerce משתמשים ב-Redux כדי לשמור ולנהל מגוון פעולות שאנחנו עושים באתרים מסוג זה, לדוגמה ניהול המוצרים שהוספנו לסל, ניהול כמות המוצרים שיש לנו בסל, ניהול השילוח וכדומה.
Redux מורכבת משלושה יחידות שפועלות ביחד על מנת ליצור זרימה וניהול תקין של אותן הנתונים / מצב:
store היא אובייקט המחזיק את כל הנתונים ומצב האפליקציה. ה-store הוא ה-single source of truth. מכאן נשאב את הנתונים שאספנו מהאתר ונזרים אותם לשאר חלקי האפליקציה שצריכים את אותו מידע.
actions הם אובייקט שמייצגים את הכוונה לשנות את מצב האפליקציה. לכל action יש מאפיין 'type' המתאר את הפעולה שהוא ירצה לבצע ומאפיין(אופציונלי) 'payload' המכיל נתונים נוספים הדרושים לביצוע הפעולה. בגרסה החדשה של Redux שאותה נלמד היום(Redux Toolkit) לא חובה לתת type, המאפיין type יהיה לפי שם ה-slice's name (שעליו נלמד) + השם של הפונקציה: counter/incrementByAmount.
export const counterSlice = createSlice({
name: 'counter', // Slice's name
initialState,
reducers: {
// Function's name
incrementByAmount: (state, action: PayloadAction<number>) => {
state.value += action.payload;
},
},
});reducers הם פונקציות שלוקחות את המצב הנוכחי של האפליקציה (state) ו-action(אופציונלי) כארגומנטים ומחזירות מצב חדש(מעודכן) על סמך הלוגיקה של ה-Reducer Function. בגרסת ה-Redux Toolkit, יש שם שחקן חדש שנכנס לתמונה שמאגד את כל ה-actions ופונקציות ה-reducers והוא נקרא createSlice. לכל Slice יש מספר מאפיינים שעוזרים לנו לנהל את המידע ולבצע מניפולציות על המידע בצורה מסודרת יותר:
לפני שנראה את התמונה של כולם ביחד, אנחנו רוצים לדבר אתכם על האפשרות של לבצע קריאות API עם Redux Toolkit.
באפשרותנו להשתמש (לא חובה) בפונקציה createAsyncThunk שמאפשרת טיפול פשוט יותר בבקשות לשרת וטיפול בשגיאות, ומשפר את ארגון הקוד. פונקציה זו באופן אוטומטי נותנת לכם גישה לשלושת המצבים בהם יכולה הבקשה שלכם להיות (pending, fulfilled and rejected).
לפני שאתם רואים את התמונות, אנחנו ממליצים לקורא את המאמר הזה לפחות פעמיים כדי להבין את Redux & Redux Toolkit. זה מנגנון שיכול להיות מסובך להבנה בפעם הראשונה, לכן קריאה שנייה בהחלט תתרום לכם. על כל שורת קוד, הוספנו הערה שתעזור לכם להבין טוב יותר את הקוד שלנו.
// Import hooks, types from react-redux and app store.
import {
TypedUseSelectorHook,
useDispatch,
useSelector
} from 'react-redux';
import type { RootState, AppDispatch } from './store';
// Custom useDispatch hook with AppDispatch type for type safety
export const useAppDispatch = () => useDispatch<AppDispatch>();
// Custom useSelector hook with RootState type for type safety
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
// Import required functions and slices
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
// Configure Redux store with counter reducer
export const store = configureStore({
reducer: {
counter: counterReducer,
},
});
// Define and export AppDispatch and RootState types
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
// Import necessary functions and types from Redux Toolkit
import {
createAsyncThunk,
createSlice,
PayloadAction
} from '@reduxjs/toolkit';
import { RootState } from '../../app/store';
import { fetchCount } from './counterAPI';
// Define the CounterState interface
export interface CounterState {
value: number;
status: 'idle' | 'loading' | 'failed';
}
// Define the initial state of the counter
const initialState: CounterState = {
value: 0,
status: 'idle',
};
// Create async thunk to increment counter.
export const incrementAsync = createAsyncThunk(
'counter/fetchCount',
async (amount: number) => {
const response = await fetchCount(amount);
return response.data;
}
);
// Initialize counter slice with state, reducers, extraReducers.
export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
state.value += 1; // Increment the counter by 1
},
decrement: (state) => {
state.value -= 1; // Decrement the counter by 1
},
incrementByAmount: (state, action: PayloadAction<number>) => {
// Increment the counter by the specified amount
state.value += action.payload;
},
},
extraReducers: (builder) => {
builder
.addCase(incrementAsync.pending, (state) => {
// Status 'loading' during pending async request.
state.status = 'loading';
})
.addCase(incrementAsync.fulfilled, (state, action) => {
// Status 'idle' during fulfilled async request.
state.status = 'idle';
// Increment the counter by the async response value
state.value += action.payload;
})
.addCase(incrementAsync.rejected, (state) => {
// Status 'failed' during rejected async request.
state.status = 'failed';
});
},
});
// Export actions for use elsewhere in the app.
export const {
increment,
decrement,
incrementByAmount
} = counterSlice.actions;
// Create selector for current count value from state.
export const selectCount = (state: RootState) => state.counter.value;
// Export the reducer for use in the store
export default counterSlice.reducer;
// Mock async data request function
export function fetchCount(amount = 1) {
return new Promise<{ data: number }>((resolve) =>
setTimeout(() => resolve({ data: amount }), 1000)
);
}import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';
const container = document.getElementById('root')!;
const root = createRoot(container);
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
reportWebVitals();import { useState } from 'react';
// Import custom hooks and actions from app and counterSlice
import { useAppSelector, useAppDispatch } from '../../app/hooks';
import {
decrement,
increment,
incrementByAmount,
incrementAsync,
selectCount,
} from './counterSlice';
import styles from './Counter.module.css';
export function Counter() {
// Use custom selector hook to get the current count value
const count = useAppSelector(selectCount);
// Use custom dispatch hook for dispatching actions
const dispatch = useAppDispatch();
// Use state to manage the increment amount
const [incrementAmount, setIncrementAmount] = useState('2');
// Convert incrementAmount to a number
const incrementValue = Number(incrementAmount) || 0;
return (
<div>
<div className={styles.row}>
{/* Decrement button */}
<button
className={styles.button}
aria-label="Decrement value"
onClick={() => dispatch(decrement())}
>
-
</button>
{/* Display the current count */}
<span className={styles.value}>{count}</span>
{/* Increment button */}
<button
className={styles.button}
aria-label="Increment value"
onClick={() => dispatch(increment())}
>
+
</button>
</div>
<div className={styles.row}>
{/* Input field for setting the increment amount */}
<input
className={styles.textbox}
aria-label="Set increment amount"
value={incrementAmount}
onChange={(e) => setIncrementAmount(e.target.value)}
/>
{/* Button for incrementing by the specified amount */}
<button
className={styles.button}
onClick={() => dispatch(incrementByAmount(incrementValue))}
>
Add Amount
</button>
{/* Button for incrementing asynchronously */}
<button
className={styles.asyncButton}
onClick={() => dispatch(incrementAsync(incrementValue))}
>
Add Async
</button>
</div>
</div>
);
}
בקובץ הזה אנחנו רוצים שתשימו לב לשני דברים:
לפעמים עולה שיח למה אנחנו צריכים להשתמש ב-Redux Toolkit כשיש לנו Context API. בואו ננסה לענות על השאלה הזו בקצרה: