സ്റ്റേറ്റ് മാനേജ്‌മെന്റിനായിട്ടുള്ള നൂതന റിയാക്ട് കോൺടെക്സ്റ്റ് എപിഐ പാറ്റേണുകൾ

പ്രോപ്പ് ഡ്രില്ലിംഗ് ഒഴിവാക്കി നിങ്ങളുടെ ആപ്ലിക്കേഷനിലുടനീളം സ്റ്റേറ്റ് പങ്കുവെക്കുന്നതിനുള്ള ശക്തമായ ഒരു സംവിധാനമാണ് റിയാക്ട് കോൺടെക്സ്റ്റ് എപിഐ. ഇതിന്റെ അടിസ്ഥാന ഉപയോഗം ലളിതമാണെങ്കിലും, അതിന്റെ പൂർണ്ണമായ സാധ്യതകൾ പ്രയോജനപ്പെടുത്തുന്നതിന് സങ്കീർണ്ണമായ സ്റ്റേറ്റ് മാനേജ്‌മെന്റ് സാഹചര്യങ്ങൾ കൈകാര്യം ചെയ്യാൻ കഴിയുന്ന നൂതന പാറ്റേണുകൾ മനസ്സിലാക്കേണ്ടതുണ്ട്. ഈ ലേഖനം അത്തരം നിരവധി പാറ്റേണുകൾ പര്യവേക്ഷണം ചെയ്യുകയും, നിങ്ങളുടെ റിയാക്ട് ഡെവലപ്‌മെന്റ് മെച്ചപ്പെടുത്തുന്നതിനായി പ്രായോഗിക ഉദാഹരണങ്ങളും പ്രവർത്തനക്ഷമമായ ഉൾക്കാഴ്ചകളും നൽകുകയും ചെയ്യുന്നു.

അടിസ്ഥാന കോൺടെക്സ്റ്റ് എപിഐയുടെ പരിമിതികൾ മനസ്സിലാക്കൽ

നൂതന പാറ്റേണുകളിലേക്ക് കടക്കുന്നതിന് മുൻപ്, അടിസ്ഥാന കോൺടെക്സ്റ്റ് എപിഐയുടെ പരിമിതികൾ തിരിച്ചറിയേണ്ടത് അത്യാവശ്യമാണ്. ലളിതവും ആഗോളമായി ലഭ്യമാകുന്നതുമായ സ്റ്റേറ്റിന് ഇത് അനുയോജ്യമാണെങ്കിലും, ഇടയ്ക്കിടെ മാറുന്ന സ്റ്റേറ്റുള്ള സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകൾക്ക് ഇത് ബുദ്ധിമുട്ടുള്ളതും കാര്യക്ഷമമല്ലാത്തതുമായി മാറും. ഒരു കോൺടെക്സ്റ്റ് ഉപയോഗിക്കുന്ന ഓരോ കമ്പോണന്റും, സ്റ്റേറ്റിന്റെ അപ്ഡേറ്റ് ചെയ്ത ഭാഗത്തെ ആശ്രയിക്കുന്നില്ലെങ്കിൽ പോലും, കോൺടെക്സ്റ്റ് മൂല്യം മാറുമ്പോഴെല്ലാം വീണ്ടും റെൻഡർ ചെയ്യപ്പെടുന്നു. ഇത് പ്രകടനത്തിലെ തടസ്സങ്ങൾക്ക് കാരണമാകും.

പാറ്റേൺ 1: കോൺടെക്സ്റ്റോടുകൂടിയ കോമ്പൗണ്ട് കമ്പോണന്റുകൾ

കോമ്പൗണ്ട് കമ്പോണന്റ് പാറ്റേൺ, ഒരു കോൺടെക്സ്റ്റിലൂടെ സ്റ്റേറ്റും ലോജിക്കും പങ്കിടുന്ന ഒരു കൂട്ടം ബന്ധപ്പെട്ട കമ്പോണന്റുകൾ സൃഷ്ടിച്ച് കോൺടെക്സ്റ്റ് എപിഐയെ മെച്ചപ്പെടുത്തുന്നു. ഈ പാറ്റേൺ പുനരുപയോഗം പ്രോത്സാഹിപ്പിക്കുകയും ഉപഭോക്താക്കൾക്കായി എപിഐ ലളിതമാക്കുകയും ചെയ്യുന്നു. ഇത് സങ്കീർണ്ണമായ ലോജിക്കിനെ ലളിതമായ നിർവ്വഹണത്തിലൂടെ ഉൾക്കൊള്ളാൻ സഹായിക്കുന്നു.

ഉദാഹരണം: ഒരു ടാബ് കമ്പോണന്റ്

ഒരു ടാബ് കമ്പോണന്റ് ഉപയോഗിച്ച് നമുക്കിത് വ്യക്തമാക്കാം. ഒന്നിലധികം ലെയറുകളിലൂടെ പ്രോപ്പുകൾ കൈമാറുന്നതിനുപകരം, Tab കമ്പോണന്റുകൾ പങ്കിട്ട ഒരു കോൺടെക്സ്റ്റിലൂടെ പരോക്ഷമായി ആശയവിനിമയം നടത്തുന്നു.

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

interface TabContextType {
  activeTab: string;
  setActiveTab: (tab: string) => void;
}

const TabContext = createContext(undefined);

interface TabProviderProps {
  children: ReactNode;
  defaultTab: string;
}

export const TabProvider: React.FC = ({ children, defaultTab }) => {
  const [activeTab, setActiveTab] = useState(defaultTab);

  const value: TabContextType = {
    activeTab,
    setActiveTab,
  };

  return {children};
};

export const useTabContext = () => {
  const context = useContext(TabContext);
  if (!context) {
    throw new Error('useTabContext must be used within a TabProvider');
  }
  return context;
};

// TabList.js
import React, { ReactNode } from 'react';

interface TabListProps {
  children: ReactNode;
}

export const TabList: React.FC = ({ children }) => {
  return 
{children}
;
};

// Tab.js
import React, { ReactNode } from 'react';
import { useTabContext } from './TabContext';

interface TabProps {
  label: string;
  children: ReactNode;
}

export const Tab: React.FC = ({ label, children }) => {
  const { activeTab, setActiveTab } = useTabContext();
  const isActive = activeTab === label;

  const handleClick = () => {
    setActiveTab(label);
  };

  return (
    
      {label}
    
  );
};

// TabPanel.js
import React, { ReactNode } from 'react';
import { useTabContext } from './TabContext';

interface TabPanelProps {
  label: string;
  children: ReactNode;
}

export const TabPanel: React.FC = ({ label, children }) => {
  const { activeTab } = useTabContext();
  const isActive = activeTab === label;

  return (
    
  );
};

// Usage
import { TabProvider, TabList, Tab, TabPanel } from './components/Tabs';

function App() {
  return (
    
      
        Tab 1
        Tab 2
        Tab 3
      
      Content for Tab 1
      Content for Tab 2
      Content for Tab 3
    
  );
}

export default App;

പ്രയോജനങ്ങൾ:

• ഉപഭോക്താക്കൾക്കുള്ള ലളിതമായ എപിഐ: ഉപയോക്താക്കൾക്ക് Tab, TabList, TabPanel എന്നിവയെക്കുറിച്ച് മാത്രം ചിന്തിച്ചാൽ മതി.
• പരോക്ഷമായ സ്റ്റേറ്റ് പങ്കുവെക്കൽ: കമ്പോണന്റുകൾ സ്വയമേവ പങ്കിട്ട സ്റ്റേറ്റ് ആക്സസ് ചെയ്യുകയും അപ്ഡേറ്റ് ചെയ്യുകയും ചെയ്യുന്നു.
• മെച്ചപ്പെട്ട പുനരുപയോഗം: Tab കമ്പോണന്റ് വ്യത്യസ്ത കോൺടെക്സ്റ്റുകളിൽ എളുപ്പത്തിൽ പുനരുപയോഗിക്കാൻ സാധിക്കും.

പാറ്റേൺ 2: ഡൈനാമിക് കോൺടെക്സ്റ്റുകൾ

ചില സാഹചര്യങ്ങളിൽ, കമ്പോണന്റ് ട്രീയിലെ കമ്പോണന്റിന്റെ സ്ഥാനത്തെയോ മറ്റ് ഡൈനാമിക് ഘടകങ്ങളെയോ അടിസ്ഥാനമാക്കി നിങ്ങൾക്ക് വ്യത്യസ്ത കോൺടെക്സ്റ്റ് മൂല്യങ്ങൾ ആവശ്യമായി വന്നേക്കാം. നിർദ്ദിഷ്ട സാഹചര്യങ്ങളെ അടിസ്ഥാനമാക്കി വ്യത്യാസപ്പെടുന്ന കോൺടെക്സ്റ്റ് മൂല്യങ്ങൾ സൃഷ്ടിക്കാനും നൽകാനും ഡൈനാമിക് കോൺടെക്സ്റ്റുകൾ നിങ്ങളെ അനുവദിക്കുന്നു.

ഉദാഹരണം: ഡൈനാമിക് കോൺടെക്സ്റ്റുകൾ ഉപയോഗിച്ചുള്ള തീമിംഗ്

ഉപയോക്താവിന്റെ മുൻഗണനകളെയോ അല്ലെങ്കിൽ ആപ്ലിക്കേഷന്റെ അവർ ഉപയോഗിക്കുന്ന ഭാഗത്തെയോ അടിസ്ഥാനമാക്കി വ്യത്യസ്ത തീമുകൾ നൽകാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്ന ഒരു തീമിംഗ് സിസ്റ്റം പരിഗണിക്കുക. നമുക്ക് ലൈറ്റും ഡാർക്ക് തീമും ഉപയോഗിച്ച് ഒരു ലളിതമായ ഉദാഹരണം ഉണ്ടാക്കാം.

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

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

const defaultTheme: Theme = {
    background: 'white',
    color: 'black'
};

const darkTheme: Theme = {
    background: 'black',
    color: 'white'
};

const ThemeContext = createContext({
    theme: defaultTheme,
    toggleTheme: () => {}
});

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC = ({ children }) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const theme = isDarkTheme ? darkTheme : defaultTheme;

  const toggleTheme = () => {
    setIsDarkTheme(!isDarkTheme);
  };

  const value: ThemeContextType = {
    theme,
    toggleTheme,
  };

  return {children};
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

// Usage
import { useTheme, ThemeProvider } from './ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    

      
This is a themed component.
      Toggle Theme
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

ഈ ഉദാഹരണത്തിൽ, ThemeProvider isDarkTheme സ്റ്റേറ്റിനെ അടിസ്ഥാനമാക്കി തീം ഡൈനാമിക്കായി നിർണ്ണയിക്കുന്നു. useTheme ഹുക്ക് ഉപയോഗിക്കുന്ന കമ്പോണന്റുകൾ തീം മാറുമ്പോൾ സ്വയമേവ വീണ്ടും റെൻഡർ ചെയ്യും.

പാറ്റേൺ 3: സങ്കീർണ്ണമായ സ്റ്റേറ്റിനായി useReducer ഉള്ള കോൺടെക്സ്റ്റ്

സങ്കീർണ്ണമായ സ്റ്റേറ്റ് ലോജിക് കൈകാര്യം ചെയ്യുന്നതിന്, കോൺടെക്സ്റ്റ് എപിഐയെ useReducer-മായി സംയോജിപ്പിക്കുന്നത് ഒരു മികച്ച സമീപനമാണ്. useReducer ആക്ഷനുകളെ അടിസ്ഥാനമാക്കി സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുന്നതിനുള്ള ഒരു ചിട്ടയായ മാർഗ്ഗം നൽകുന്നു, കൂടാതെ കോൺടെക്സ്റ്റ് എപിഐ ഈ സ്റ്റേറ്റും ഡിസ്പാച്ച് ഫംഗ്‌ഷനും നിങ്ങളുടെ ആപ്ലിക്കേഷനിലുടനീളം പങ്കിടാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

ഉദാഹരണം: ഒരു ലളിതമായ ടു-ഡു ലിസ്റ്റ്

// TodoContext.js
import React, { createContext, useContext, useReducer, ReactNode } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

type TodoAction = 
  | { type: 'ADD_TODO'; text: string } 
  | { type: 'TOGGLE_TODO'; id: number } 
  | { type: 'DELETE_TODO'; id: number };

interface TodoContextType {
  state: TodoState;
  dispatch: React.Dispatch;
}

const initialState: TodoState = {
  todos: [],
};

const todoReducer = (state: TodoState, action: TodoAction): TodoState => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.text, completed: false }],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.id),
      };
    default:
      return state;
  }
};

const TodoContext = createContext(undefined);

interface TodoProviderProps {
  children: ReactNode;
}

export const TodoProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(todoReducer, initialState);

  const value: TodoContextType = {
    state,
    dispatch,
  };

  return {children};
};

export const useTodo = () => {
  const context = useContext(TodoContext);
  if (!context) {
    throw new Error('useTodo must be used within a TodoProvider');
  }
  return context;
};

// Usage
import { useTodo, TodoProvider } from './TodoContext';

function TodoList() {
  const { state, dispatch } = useTodo();

  return (
    

      {state.todos.map((todo) => (
        

          
            {todo.text}
          
           dispatch({ type: 'TOGGLE_TODO', id: todo.id })}>Toggle
           dispatch({ type: 'DELETE_TODO', id: todo.id })}>Delete
        
      ))}
    
  );
}

function AddTodo() {
  const { dispatch } = useTodo();
  const [text, setText] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: 'ADD_TODO', text });
    setText('');
  };

  return (
    

       setText(e.target.value)} />
      Add Todo
    
  );
}

function App() {
  return (
    
      
      
    
  );
}

export default App;

ഈ പാറ്റേൺ സ്റ്റേറ്റ് മാനേജ്മെന്റ് ലോജിക്കിനെ റെഡ്യൂസറിനുള്ളിൽ കേന്ദ്രീകരിക്കുന്നു, ഇത് യുക്തിസഹമായി ചിന്തിക്കാനും ടെസ്റ്റ് ചെയ്യാനും എളുപ്പമാക്കുന്നു. കമ്പോണന്റുകൾക്ക് സ്റ്റേറ്റ് നേരിട്ട് കൈകാര്യം ചെയ്യേണ്ട ആവശ്യമില്ലാതെ സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുന്നതിനായി ആക്ഷനുകൾ ഡിസ്പാച്ച് ചെയ്യാൻ കഴിയും.

പാറ്റേൺ 4: `useMemo`, `useCallback` ഉപയോഗിച്ച് ഒപ്റ്റിമൈസ് ചെയ്ത കോൺടെക്സ്റ്റ് അപ്‌ഡേറ്റുകൾ

നേരത്തെ സൂചിപ്പിച്ചതുപോലെ, കോൺടെക്സ്റ്റ് എപിഐയിലെ ഒരു പ്രധാന പ്രകടന പരിഗണന അനാവശ്യമായ റീ-റെൻഡറുകളാണ്. useMemo, useCallback എന്നിവ ഉപയോഗിക്കുന്നത്, കോൺടെക്സ്റ്റ് മൂല്യത്തിന്റെ ആവശ്യമായ ഭാഗങ്ങൾ മാത്രം അപ്‌ഡേറ്റ് ചെയ്യപ്പെടുന്നുവെന്നും ഫംഗ്ഷൻ റഫറൻസുകൾ സ്ഥിരമായി നിലനിൽക്കുന്നുവെന്നും ഉറപ്പാക്കുന്നതിലൂടെ ഈ റീ-റെൻഡറുകൾ തടയാൻ കഴിയും.

ഉദാഹരണം: ഒരു തീം കോൺടെക്സ്റ്റ് ഒപ്റ്റിമൈസ് ചെയ്യൽ

// OptimizedThemeContext.js
import React, { createContext, useContext, useState, useMemo, useCallback, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

const defaultTheme: Theme = {
    background: 'white',
    color: 'black'
};

const darkTheme: Theme = {
    background: 'black',
    color: 'white'
};

const ThemeContext = createContext({
    theme: defaultTheme,
    toggleTheme: () => {}
});

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC = ({ children }) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const theme = isDarkTheme ? darkTheme : defaultTheme;

  const toggleTheme = useCallback(() => {
    setIsDarkTheme(!isDarkTheme);
  }, [isDarkTheme]);

  const value: ThemeContextType = useMemo(() => ({
    theme,
    toggleTheme,
  }), [theme, toggleTheme]);

  return {children};
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

വിശദീകരണം:

• useCallback toggleTheme ഫംഗ്‌ഷനെ മെമ്മോയിസ് ചെയ്യുന്നു. ഇത് isDarkTheme മാറുമ്പോൾ മാത്രം ഫംഗ്‌ഷൻ റഫറൻസ് മാറുന്നുവെന്ന് ഉറപ്പാക്കുന്നു, toggleTheme ഫംഗ്‌ഷനെ മാത്രം ആശ്രയിക്കുന്ന കമ്പോണന്റുകളുടെ അനാവശ്യമായ റീ-റെൻഡറുകൾ തടയുന്നു.
• useMemo കോൺടെക്സ്റ്റ് മൂല്യത്തെ മെമ്മോയിസ് ചെയ്യുന്നു. ഇത് theme അല്ലെങ്കിൽ toggleTheme ഫംഗ്ഷൻ മാറുമ്പോൾ മാത്രം കോൺടെക്സ്റ്റ് മൂല്യം മാറുന്നുവെന്ന് ഉറപ്പാക്കുന്നു, ഇത് അനാവശ്യമായ റീ-റെൻഡറുകൾ വീണ്ടും തടയുന്നു.

useCallback ഇല്ലാതെ, ThemeProvider-ന്റെ ഓരോ റെൻഡറിലും toggleTheme ഫംഗ്ഷൻ വീണ്ടും സൃഷ്ടിക്കപ്പെടും, ഇത് value മാറുന്നതിനും, തീം മാറിയില്ലെങ്കിൽ പോലും, ഉപയോഗിക്കുന്ന എല്ലാ കമ്പോണന്റുകളിലും റീ-റെൻഡറുകൾക്ക് കാരണമാകും. useMemo, അതിന്റെ ഡിപൻഡൻസികൾ (theme അല്ലെങ്കിൽ toggleTheme) മാറുമ്പോൾ മാത്രം ഒരു പുതിയ value സൃഷ്ടിക്കപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

പാറ്റേൺ 5: കോൺടെക്സ്റ്റ് സെലക്ടറുകൾ

കോൺടെക്സ്റ്റ് സെലക്ടറുകൾ, കോൺടെക്സ്റ്റ് മൂല്യത്തിന്റെ നിർദ്ദിഷ്ട ഭാഗങ്ങൾ മാത്രം സബ്‌സ്‌ക്രൈബുചെയ്യാൻ കമ്പോണന്റുകളെ അനുവദിക്കുന്നു. ഇത് കോൺടെക്സ്റ്റിന്റെ മറ്റ് ഭാഗങ്ങൾ മാറുമ്പോൾ ഉണ്ടാകുന്ന അനാവശ്യ റീ-റെൻഡറുകൾ തടയുന്നു. `use-context-selector` പോലുള്ള ലൈബ്രറികളോ അല്ലെങ്കിൽ കസ്റ്റം നിർവ്വഹണങ്ങളോ ഉപയോഗിച്ച് ഇത് നേടാനാകും.

ഒരു കസ്റ്റം കോൺടെക്സ്റ്റ് സെലക്ടർ ഉപയോഗിച്ചുള്ള ഉദാഹരണം

// useCustomContextSelector.js
import { useContext, useState, useRef, useEffect } from 'react';

function useCustomContextSelector(
  context: React.Context,
  selector: (value: T) => S
): S {
  const value = useContext(context);
  const [selected, setSelected] = useState(() => selector(value));
  const latestSelector = useRef(selector);
  latestSelector.current = selector;

  useEffect(() => {
    let didUnmount = false;
    let lastSelected = selected;

    const subscription = () => {
      if (didUnmount) {
        return;
      }
      const nextSelected = latestSelector.current(value);
      if (!Object.is(lastSelected, nextSelected)) {
        lastSelected = nextSelected;
        setSelected(nextSelected);
      }
    };

    // You would typically subscribe to context changes here. Since this is a simplified
    // example, we'll just call subscription immediately to initialize.
    subscription();

    return () => {
      didUnmount = true;
      // Unsubscribe from context changes here, if applicable.
    };
  }, [value]); // Re-run effect whenever the context value changes

  return selected;
}

export default useCustomContextSelector;

// ThemeContext.js (Simplified for brevity)
import React, { createContext, useState, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  setTheme: (newTheme: Theme) => void; 
}

const ThemeContext = createContext(undefined);

interface ThemeProviderProps {
  children: ReactNode;
  initialTheme: Theme;
}

export const ThemeProvider: React.FC = ({ children, initialTheme }) => {
  const [theme, setTheme] = useState(initialTheme);

  const value: ThemeContextType = {
    theme,
    setTheme
  };

  return {children};
};

export const useThemeContext = () => {
    const context = React.useContext(ThemeContext);
    if (!context) {
        throw new Error("useThemeContext must be used within a ThemeProvider");
    }
    return context;
};

export default ThemeContext;

// Usage
import useCustomContextSelector from './useCustomContextSelector';
import ThemeContext, { ThemeProvider, useThemeContext } from './ThemeContext';

function BackgroundComponent() {
  const background = useCustomContextSelector(ThemeContext, (context) => context.theme.background);
  return 
Background
;
}

function ColorComponent() {
  const color = useCustomContextSelector(ThemeContext, (context) => context.theme.color);
  return 
Color
;
}

function App() {
  const { theme, setTheme } = useThemeContext();

  const toggleTheme = () => {
    setTheme({ background: theme.background === 'white' ? 'black' : 'white', color: theme.color === 'black' ? 'white' : 'black' });
  };

  return (
    
      Toggle Theme
      
      
    
  );
}

export default App;

ഈ ഉദാഹരണത്തിൽ, BackgroundComponent തീമിന്റെ background പ്രോപ്പർട്ടി മാറുമ്പോൾ മാത്രം റീ-റെൻഡർ ചെയ്യുന്നു, കൂടാതെ ColorComponent color പ്രോപ്പർട്ടി മാറുമ്പോൾ മാത്രം റീ-റെൻഡർ ചെയ്യുന്നു. ഇത് മുഴുവൻ കോൺടെക്സ്റ്റ് മൂല്യവും മാറുമ്പോൾ ഉണ്ടാകുന്ന അനാവശ്യ റീ-റെൻഡറുകൾ ഒഴിവാക്കുന്നു.

പാറ്റേൺ 6: സ്റ്റേറ്റിൽ നിന്ന് ആക്ഷനുകളെ വേർതിരിക്കുക

വലിയ ആപ്ലിക്കേഷനുകൾക്കായി, കോൺടെക്സ്റ്റ് മൂല്യത്തെ രണ്ട് വ്യത്യസ്ത കോൺടെക്സ്റ്റുകളായി വിഭജിക്കുന്നത് പരിഗണിക്കുക: ഒന്ന് സ്റ്റേറ്റിനും മറ്റൊന്ന് ആക്ഷനുകൾക്കും (ഡിസ്പാച്ച് ഫംഗ്ഷനുകൾ). ഇത് കോഡ് ഓർഗനൈസേഷനും ടെസ്റ്റ് ചെയ്യാനുള്ള എളുപ്പവും മെച്ചപ്പെടുത്തും.

വേറിട്ട സ്റ്റേറ്റ്, ആക്ഷൻ കോൺടെക്സ്റ്റുകളുള്ള ടു-ഡു ലിസ്റ്റ് ഉദാഹരണം

// TodoStateContext.js
import React, { createContext, useContext, useReducer, ReactNode } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

const initialState: TodoState = {
  todos: [],
};

const TodoStateContext = createContext(initialState);

interface TodoStateProviderProps {
  children: ReactNode;
}

export const TodoStateProvider: React.FC = ({ children }) => {
  const [state] = useReducer(todoReducer, initialState);

  return {children};
};

export const useTodoState = () => {
  return useContext(TodoStateContext);
};

// TodoActionContext.js
import React, { createContext, useContext, Dispatch, ReactNode } from 'react';

type TodoAction = 
  | { type: 'ADD_TODO'; text: string } 
  | { type: 'TOGGLE_TODO'; id: number } 
  | { type: 'DELETE_TODO'; id: number };

const TodoActionContext = createContext | undefined>(undefined);

interface TodoActionProviderProps {
    children: ReactNode;
}

export const TodoActionProvider: React.FC = ({children}) => {
    const [, dispatch] = useReducer(todoReducer, initialState);

    return {children};
};


export const useTodoDispatch = () => {
  const dispatch = useContext(TodoActionContext);
  if (!dispatch) {
    throw new Error('useTodoDispatch must be used within a TodoActionProvider');
  }
  return dispatch;
};

// todoReducer.js
export const todoReducer = (state: TodoState, action: TodoAction): TodoState => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.text, completed: false }],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.id),
      };
    default:
      return state;
  }
};

// Usage
import { useTodoState, TodoStateProvider } from './TodoStateContext';
import { useTodoDispatch, TodoActionProvider } from './TodoActionContext';

function TodoList() {
  const state = useTodoState();

  return (
    

      {state.todos.map((todo) => (
        

          
            {todo.text}
          
          
        
      ))}
    
  );
}

function TodoActions({ todo }) {
  const dispatch = useTodoDispatch();

  return (
    <>
       dispatch({ type: 'TOGGLE_TODO', id: todo.id })}>Toggle
       dispatch({ type: 'DELETE_TODO', id: todo.id })}>Delete
    
  );
}

function AddTodo() {
  const dispatch = useTodoDispatch();
  const [text, setText] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: 'ADD_TODO', text });
    setText('');
  };

  return (
    

       setText(e.target.value)} />
      Add Todo
    
  );
}


function App() {
  return (
    
      
        
        
      
    
  );
}

export default App;

ഈ വേർതിരിവ് കമ്പോണന്റുകൾക്ക് അവർക്കാവശ്യമുള്ള കോൺടെക്സ്റ്റ് മാത്രം സബ്‌സ്‌ക്രൈബുചെയ്യാൻ അനുവദിക്കുന്നു, ഇത് അനാവശ്യമായ റീ-റെൻഡറുകൾ കുറയ്ക്കുന്നു. കൂടാതെ, റെഡ്യൂസറും ഓരോ കമ്പോണന്റും ഒറ്റയ്‌ക്കൊറ്റയ്ക്ക് യൂണിറ്റ് ടെസ്റ്റ് ചെയ്യുന്നത് എളുപ്പമാക്കുന്നു. കൂടാതെ, പ്രൊവൈഡർ റാപ്പ് ചെയ്യുന്ന ക്രമവും പ്രധാനമാണ്. ActionProvider StateProvider-നെ റാപ്പ് ചെയ്യണം.

മികച്ച രീതികളും പരിഗണനകളും

• എല്ലാ സ്റ്റേറ്റ് മാനേജ്‌മെന്റ് ലൈബ്രറികൾക്കും പകരമാവരുത് കോൺടെക്സ്റ്റ്: വളരെ വലുതും സങ്കീർണ്ണവുമായ ആപ്ലിക്കേഷനുകൾക്ക്, Redux അല്ലെങ്കിൽ Zustand പോലുള്ള പ്രത്യേക സ്റ്റേറ്റ് മാനേജ്‌മെന്റ് ലൈബ്രറികൾ ഇപ്പോഴും ഒരു മികച്ച തിരഞ്ഞെടുപ്പായിരിക്കാം.
• അമിതമായ കോൺടെക്സ്റ്റ് ഉപയോഗം ഒഴിവാക്കുക: എല്ലാ സ്റ്റേറ്റും ഒരു കോൺടെക്സ്റ്റിൽ ഉൾപ്പെടുത്തേണ്ടതില്ല. യഥാർത്ഥത്തിൽ ആഗോളമായതോ വ്യാപകമായി പങ്കിടുന്നതോ ആയ സ്റ്റേറ്റിനായി വിവേകത്തോടെ കോൺടെക്സ്റ്റ് ഉപയോഗിക്കുക.
• പ്രകടന പരിശോധന: നിങ്ങളുടെ കോൺടെക്സ്റ്റ് ഉപയോഗത്തിന്റെ പ്രകടനത്തെ എപ്പോഴും അളക്കുക, പ്രത്യേകിച്ച് ഇടയ്ക്കിടെ അപ്‌ഡേറ്റ് ചെയ്യുന്ന സ്റ്റേറ്റുമായി ബന്ധപ്പെടുമ്പോൾ.
• കോഡ് സ്പ്ലിറ്റിംഗ്: കോൺടെക്സ്റ്റ് എപിഐ ഉപയോഗിക്കുമ്പോൾ, നിങ്ങളുടെ ആപ്ലിക്കേഷനെ ചെറിയ ഭാഗങ്ങളായി കോഡ്-സ്പ്ലിറ്റ് ചെയ്യുന്നത് പരിഗണിക്കുക. സ്റ്റേറ്റിലെ ഒരു ചെറിയ മാറ്റം ആപ്ലിക്കേഷന്റെ വലിയൊരു ഭാഗം റീ-റെൻഡർ ചെയ്യാൻ കാരണമാകുമ്പോൾ ഇത് വളരെ പ്രധാനമാണ്.

ഉപസംഹാരം

റിയാക്ട് കോൺടെക്സ്റ്റ് എപിഐ സ്റ്റേറ്റ് മാനേജ്‌മെന്റിനുള്ള ഒരു ബഹുമുഖ ഉപകരണമാണ്. ഈ നൂതന പാറ്റേണുകൾ മനസ്സിലാക്കുകയും പ്രയോഗിക്കുകയും ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് സങ്കീർണ്ണമായ സ്റ്റേറ്റ് ഫലപ്രദമായി കൈകാര്യം ചെയ്യാനും പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യാനും കൂടുതൽ പരിപാലിക്കാവുന്നതും വികസിപ്പിക്കാവുന്നതുമായ റിയാക്ട് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാനും കഴിയും. നിങ്ങളുടെ നിർദ്ദിഷ്ട ആവശ്യങ്ങൾക്കായി ശരിയായ പാറ്റേൺ തിരഞ്ഞെടുക്കാനും നിങ്ങളുടെ കോൺടെക്സ്റ്റ് ഉപയോഗത്തിന്റെ പ്രകടനപരമായ പ്രത്യാഘാതങ്ങൾ ശ്രദ്ധാപൂർവ്വം പരിഗണിക്കാനും ഓർമ്മിക്കുക.

റിയാക്ട് വികസിക്കുന്നതിനനുസരിച്ച്, കോൺടെക്സ്റ്റ് എപിഐയെ ചുറ്റിപ്പറ്റിയുള്ള മികച്ച രീതികളും വികസിക്കും. പുതിയ സാങ്കേതിക വിദ്യകളെയും ലൈബ്രറികളെയും കുറിച്ച് അറിഞ്ഞിരിക്കുന്നത് ആധുനിക വെബ് ഡെവലപ്‌മെന്റിന്റെ സ്റ്റേറ്റ് മാനേജ്‌മെന്റ് വെല്ലുവിളികളെ നേരിടാൻ നിങ്ങളെ സജ്ജരാക്കുമെന്ന് ഉറപ്പാക്കുന്നു. കൂടുതൽ സൂക്ഷ്മമായ റിയാക്റ്റിവിറ്റിക്കായി സിഗ്നലുകളുമായി കോൺടെക്സ്റ്റ് ഉപയോഗിക്കുന്നത് പോലുള്ള ഉയർന്നുവരുന്ന പാറ്റേണുകൾ പര്യവേക്ഷണം ചെയ്യുന്നത് പരിഗണിക്കുക.