Redux Toolkit 是官方推薦用來簡化Redux開發的工具集。它包含了一些預設的最佳實踐，使得創建和管理Redux狀態變得更簡單。
1. 創建Store
使用configureStore函數來創建Redux store，它會自動配置中間件，如redux-thunk用於處理異步操作。
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
const store = configureStore({
reducer: rootReducer,
});
export default store;2.創建Reducer Slices
Redux Toolkit 提供了 createSlice API，用於創建可管理的狀態切片，並且可以自動生成對應的action creators。
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: (state) => state + 1,
decrement: (state) => state - 1,
reset: () => 0,
},
});
export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;3. Dispatching Actions
在React組件中，你可以使用useDispatch和useSelector這兩個react-redux的hook來派發action和獲取狀態。
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement, reset } from './counterSlice';
function Counter() {
const dispatch = useDispatch();
const count = useSelector((state) => state.counter);
return (
<div>
<button onClick={() => dispatch(increment())}>+</button>
<p>{count}</p>
<button onClick={() => dispatch(decrement())}>-</button>
<button onClick={() => dispatch(reset())}>Reset</button>
</div>
);
}
export default Counter;Middleware支持
Redux Toolkit允許你輕鬆添加自定義中間件，比如redux-thunk，用於處理異步操作。
import { applyMiddleware } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
const store = configureStore({
reducer: rootReducer,
middleware: [thunk],
});優化性能
使用createAsyncThunk可以創建處理異步操作的action creators，它們會自動處理pending和fulfilled/rejected狀態。
import { createAsyncThunk } from '@reduxjs/toolkit';
export const fetchUser = createAsyncThunk(
'users/fetchUser',
async () => {
const response = await fetch('https://api.example.com/user');
const data = await response.json();
return data;
}
);編寫Selectors
使用createSelector（通常來自reselect庫）來創建高效的計算屬性，只在依賴項改變時重新計算。
import { createSelector } from 'reselect';
const selectUser = (state) => state.users.user;
const selectTotal = createSelector(
[selectUser],
user => user && user.totalPoints
);
export const selectTotalPoints = selectTotal;Immutability Redux
Toolkit默認使用immer庫，這意味着在reducer中你可以直接修改狀態對象，它會自動處理不可變更新。
import { createSlice } from '@reduxjs/toolkit';
const todoSlice = createSlice({
name: 'todos',
initialState: [],
reducers: {
addTodo: (state, action) => {
// 直接修改state，immer會處理不可變更新
state.push({ text: action.payload, completed: false });
},
toggleTodo: (state, action) => {
state[action.index].completed = !state[action.index].completed;
},
},
});
export const { addTodo, toggleTodo } = todoSlice.actions;
export default todoSlice.reducer;Automatic Reducer Matching
當你導入一個slice的reducer時，Redux Toolkit會自動將它添加到store的reducer對象中，無需手動合併。
Code Splitting
如果你的應用很大，可以考慮將不同的狀態切片分散到多個文件中，然後在需要的時候按需加載，實現代碼分割。
中間件集成
Redux Toolkit允許你方便地添加和管理多箇中間件，如日誌、錯誤處理等。
Testing
使用createSlice創建的action creators和reducers可以更容易地進行單元測試，因為它們的邏輯已經很清晰了。
使用TypeScript
Redux Toolkit與TypeScript很好地集成，可以為你的action creators、reducers和整個store提供類型安全。
CombineReducers
雖然createSlice簡化了創建和管理狀態切片，但你仍然可以使用combineReducers來組合多個切片，如果你的應用有更復雜的結構需求。
使用RTK Query
Redux Toolkit還提供了createApi功能，用於管理API請求，類似於Apollo Client的GraphQL queries。它處理緩存、自動重試、訂閲等功能。
Performance Monitoring
Redux Toolkit與Redux DevTools擴展配合使用，可以方便地監控應用的狀態變化，包括時間旅行、快照對比等，這對於調試和優化性能非常有用。
Error Handling
你可以通過createAsyncThunk的第二參數來捕獲和處理異步操作中的錯誤，這有助於提供更好的用户體驗。
export const fetchUser = createAsyncThunk(
'users/fetchUser',
async (_, thunkAPI) => {
try {
const response = await fetch('https://api.example.com/user');
if (!response.ok) {
throw new Error('Failed to fetch user');
}
return response.json();
} catch (error) {
// 這裏的錯誤會被自動處理並返回到 rejected case
thunkAPI.rejectWithValue(error.message);
}
},
);Normalizing State Shape
對於複雜的數據結構，你可以考慮規範化狀態形狀，這有助於減少冗餘和提高查詢性能。normalizr庫可以幫助你完成這項工作。
Reducer Composition
你可以在創建slice時使用其他reducer函數，以組合複雜的業務邏輯。
Middleware for Side Effects
Redux Toolkit允許你使用中間件來處理副作用，例如發送網絡請求、定時任務或訂閲事件。
Reducer Logic Refactoring
如果你的應用需要重構，你可以輕鬆地將一個大的reducer拆分為多個小的、可重用的部分，然後再用combineReducers組合起來。
Optimistic Updates
可以利用Redux Toolkit來實現樂觀更新，即在數據尚未實際更新之前就顯示預期結果，提升用户體驗。
Code Generation
在大型項目中，可以考慮使用代碼生成工具，如redux-starter-kit或自定義腳本，來自動化創建slice和action creators。
Redux Toolkit提供了許多工具和最佳實踐，幫助開發者更高效地管理React應用的狀態。通過合理利用這些特性，可以構建出更健壯、易於維護的項目。在實際開發中，不斷學習和探索，找到最適合你項目需求的方法，是提升開發效率的關鍵。
