مدیریت حالت در React Native: Redux، Context API، MobX و Zustand

Summarize this content to 400 words in Persian Lang
هی توسعه دهندگان!

مدیریت وضعیت در برنامه‌های React Native برای اطمینان از تجربه کاربری سازگار و کارآمد بسیار مهم است. کتابخانه ها و رویکردهای مختلفی برای تسهیل این فرآیند وجود دارد که هر کدام نقاط قوت و موارد استفاده خاص خود را دارند. در این مقاله، تفاوت‌های کلیدی بین Redux، Context API، MobX و Zustand را بررسی می‌کنیم و نقاط قوت، نمونه‌های کد و نحوه اعمال آن‌ها را در پروژه خود برجسته می‌کنیم.

Redux

Redux یک کتابخانه مدیریت دولتی قابل پیش بینی برای جاوا اسکریپت است که به طور گسترده در جامعه React Native پذیرفته شده است. این حالت برنامه را در یک فروشگاه متمرکز می کند و ردیابی و نگهداری آن را آسان تر می کند.

نقاط قوت

قابل پیش بینی بودن: حالت متمرکز که ردیابی و اشکال زدایی را تسهیل می کند.

DevTools: Redux DevTools برای بازرسی و دستکاری حالت.

انجمن و پشتیبانی: جامعه بزرگ و اسناد گسترده.

نقاط ضعف

پیچیدگی: نیاز به راه اندازی و دیگ بخار قابل توجهی دارد.

منحنی یادگیری: به دلیل ساختار قوی می تواند برای مبتدیان چالش برانگیز باشد.

مثال کد

store.js

// store.js
import { createStore } from ‘redux’;

// action types
const INCREMENT = ‘INCREMENT’;
const DECREMENT = ‘DECREMENT’;

// actions
export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });

// reducer
const initialState = { count: 0 };
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case INCREMENT:
return { count: state.count + 1 };
case DECREMENT:
return { count: state.count – 1 };
default:
return state;
}
};

// store
export const store = createStore(counterReducer);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

App.js

// App.js
import React from ‘react’;
import { Provider, useSelector, useDispatch } from ‘react-redux’;
import { store, increment, decrement } from ‘./store’;

const Counter = () => {
const count = useSelector(state => state.count);
const dispatch = useDispatch();

return (
div>
p>{count}/p>
button onClick={() => dispatch(increment())}>Increment/button>
button onClick={() => dispatch(decrement())}>Decrement/button>
/div>
);
};

const App = () => (
Provider store={store}>
Counter />
/Provider>
);

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Context API

Context API یک راه حل بومی React برای انتقال داده از طریق درخت کامپوننت بدون نیاز به ارسال دستی props در هر سطح است.

نقاط قوت

بومی: بخشی جدایی ناپذیر از React، بدون نیاز به وابستگی خارجی.

سادگی: استفاده آسان برای موارد ساده مدیریت دولتی.

نقاط ضعف

کارایی: در صورت عدم استفاده صحیح می تواند باعث رندرهای غیر ضروری شود.

مقیاس پذیری: کمتر مناسب برای کاربردهای بزرگ با بسیاری از حالت های پیچیده.

مثال کد

CountContext.js

// CountContext.js
import React, { createContext, useState, useContext } from ‘react’;

const CountContext = createContext();

export const CountProvider = ({ children }) => {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count – 1);

return (
CountContext.Provider value={{ count, increment, decrement }}>
{children}
/CountContext.Provider>
);
};

export const useCount = () => useContext(CountContext);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

App.js

// App.js
import React from ‘react’;
import { CountProvider, useCount } from ‘./CountContext’;

const Counter = () => {
const { count, increment, decrement } = useCount();

return (
div>
p>{count}/p>
button onClick={increment}>Increment/button>
button onClick={decrement}>Decrement/button>
/div>
);
};

const App = () => (
CountProvider>
Counter />
/CountProvider>
);

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

MobX

MobX کتابخانه ای است که امکان مدیریت حالت واکنشی را فراهم می کند، جایی که هنگام تغییر وضعیت، اجزا به طور خودکار به روز می شوند.

نقاط قوت

واکنش پذیری: به روز رسانی خودکار بر اساس تغییرات وضعیت.

سادگی: دیگ بخار کمتر در مقایسه با Redux برای حالت های واکنش پذیر.

نقاط ضعف

شعبده بازي: به دلیل ماهیت واکنش پذیری کمتر قابل پیش بینی است.

فرزندخواندگی: در مقایسه با Redux کمتر مورد استفاده قرار می‌گیرد و در نتیجه منابع و ابزارهای کمتری در دسترس است.

مثال کد

store.js

// store.js
import { makeAutoObservable } from ‘mobx’;

class CounterStore {
count = 0;

constructor() {
makeAutoObservable(this);
}

increment = () => {
this.count += 1;
};

decrement = () => {
this.count -= 1;
};
}

export const counterStore = new CounterStore();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

App.js

// App.js
import React from ‘react’;
import { observer } from ‘mobx-react’;
import { counterStore } from ‘./store’;

const Counter = observer(() => (
div>
p>{counterStore.count}/p>
button onClick={counterStore.increment}>Increment/button>
button onClick={counterStore.decrement}>Decrement/button>
/div>
));

const App = () => (
div>
Counter />
/div>
);

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

وضعیت

Zustand یک کتابخانه مدیریت ایالتی سبک و ساده برای React است که عملکرد بالا و API بصری را ارائه می دهد.

نقاط قوت

سادگی: API ساده و قابل درک.

کارایی: عملکرد بالا با رندرهای بهینه.

اندازه: سبک وزن با حداقل سربار.

نقاط ضعف

انجمن: پذیرش کمتر در مقایسه با Redux و Context API.

مستندات: گستردگی کمتر در مقایسه با کتابخانه های با سابقه بیشتر.

مثال کد

useStore.js

// useStore.js
import create from ‘zustand’;

const useStore = create(set => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
decrement: () => set(state => ({ count: state.count – 1 })),
}));

export default useStore;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

App.js

// App.js
import React from ‘react’;
import useStore from ‘./useStore’;

const Counter = () => {
const { count, increment, decrement } = useStore();

return (
div>
p>{count}/p>
button onClick={increment}>Increment/button>
button onClick={decrement}>Decrement/button>
/div>
);
};

const App = () => (
div>
Counter />
/div>
);

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

هر یک از کتابخانه های ارائه شده – Redux، Context API، MobX، و Zustand – یک راه منحصر به فرد برای مدیریت وضعیت در برنامه های React Native ارائه می دهد. انتخاب بین آنها به نیازهای خاص پروژه شما مانند پیچیدگی، عملکرد و ترجیحات شخصی بستگی دارد. امیدوارم این راهنما به شما در درک بهتر گزینه های خود و تصمیم گیری آگاهانه در هنگام انتخاب راه حل مدیریت ایالت برای پروژه های React Native کمک کرده باشد.

منابع

Redux
React Context API
MobX
وضعیت

// store.js
import { createStore } from 'redux';

// action types
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// actions
export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });

// reducer
const initialState = { count: 0 };
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    default:
      return state;
  }
};

// store
export const store = createStore(counterReducer);

// App.js
import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { store, increment, decrement } from './store';

const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    div>
      p>{count}/p>
      button onClick={() => dispatch(increment())}>Increment/button>
      button onClick={() => dispatch(decrement())}>Decrement/button>
    /div>
  );
};

const App = () => (
  Provider store={store}>
    Counter />
  /Provider>
);

export default App;

// CountContext.js
import React, { createContext, useState, useContext } from 'react';

const CountContext = createContext();

export const CountProvider = ({ children }) => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    CountContext.Provider value={{ count, increment, decrement }}>
      {children}
    /CountContext.Provider>
  );
};

export const useCount = () => useContext(CountContext);

// App.js
import React from 'react';
import { CountProvider, useCount } from './CountContext';

const Counter = () => {
  const { count, increment, decrement } = useCount();

  return (
    div>
      p>{count}/p>
      button onClick={increment}>Increment/button>
      button onClick={decrement}>Decrement/button>
    /div>
  );
};

const App = () => (
  CountProvider>
    Counter />
  /CountProvider>
);

export default App;

// store.js
import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment = () => {
    this.count += 1;
  };

  decrement = () => {
    this.count -= 1;
  };
}

export const counterStore = new CounterStore();

// App.js
import React from 'react';
import { observer } from 'mobx-react';
import { counterStore } from './store';

const Counter = observer(() => (
  div>
    p>{counterStore.count}/p>
    button onClick={counterStore.increment}>Increment/button>
    button onClick={counterStore.decrement}>Decrement/button>
  /div>
));

const App = () => (
  div>
    Counter />
  /div>
);

export default App;

// useStore.js
import create from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
}));

export default useStore;

// App.js
import React from 'react';
import useStore from './useStore';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    div>
      p>{count}/p>
      button onClick={increment}>Increment/button>
      button onClick={decrement}>Decrement/button>
    /div>
  );
};

const App = () => (
  div>
    Counter />
  /div>
);

export default App;