ما وراء useState: أنماط متقدمة لإدارة الحالة في React
مقدمة
في حين أن useState
مثالي لمكونات React البسيطة ، فإن التطبيقات الأكبر تتطلب حلول إدارة حالة أكثر قوة. تتعمق هذه المقالة في ثلاثة بدائل شائعة: Context API مع useReducer
و Zustand.
Context API مع useReducer
تتيح لك Context API مشاركة الحالة عبر شجرة المكونات الخاصة بك دون تمرير الدعائم بشكل مفرط. يتيح الجمع بينه وبين useReducer
طريقة منظمة لإدارة تحديثات الحالة المعقدة.
import React, { createContext, useContext, useReducer } from 'react';
const CounterContext = createContext();
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
};
const CounterProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<CounterContext.Provider value={{ state, dispatch }}>
{children}
</CounterContext.Provider>
);
};
const useCounter = () => {
const context = useContext(CounterContext);
if (!context) {
throw new Error('useCounter must be used within a CounterProvider');
}
return context;
};
const Counter = () => {
const { state, dispatch } = useCounter();
return (
<div>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};
export { CounterProvider, Counter };
لاستخدامه:
import { CounterProvider, Counter } from './CounterContext';
function App() {
return (
<CounterProvider>
<Counter />
</CounterProvider>
);
}
export default App;
Zustand
Zustand هو حل صغير وسريع وقابل للتطوير لإدارة الحالة. يستخدم مبادئ Flux مبسطة.
import create from 'zustand';
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
}));
const Counter = () => {
const { count, increment, decrement } = useStore();
return (
<div>
Count: {count}
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
export default Counter;
خاتمة
يعتمد اختيار حل إدارة الحالة المناسب على تعقيد التطبيق الخاص بك. يوفر Context API مع useReducer
تحكمًا منظمًا ، بينما يوفر Zustand طريقة أبسط وأكثر انسيابية. ضع في اعتبارك هذه الخيارات عندما لم يعد useState
كافيًا لمشاريع React الخاصة بك.