M

MLOG

മലയാളം

റിയാക്റ്റിന്റെ useReducer ഹുക്ക് ഉപയോഗിച്ച് സങ്കീർണ്ണമായ ആപ്ലിക്കേഷൻ സ്റ്റേറ്റുകൾ കാര്യക്ഷമമായി കൈകാര്യം ചെയ്യുക. ഇത് ആഗോള റിയാക്റ്റ് പ്രോജക്റ്റുകളുടെ പ്രകടനവും പരിപാലനവും മെച്ചപ്പെടുത്തുന്നു.

റിയാക്റ്റ് useReducer പാറ്റേൺ: സങ്കീർണ്ണമായ സ്റ്റേറ്റ് മാനേജ്‌മെന്റിൽ വൈദഗ്ദ്ധ്യം നേടാം

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

സങ്കീർണ്ണമായ സ്റ്റേറ്റ് മാനേജ്‌മെന്റിന്റെ ആവശ്യകത മനസ്സിലാക്കാം

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

ഈ സാഹചര്യങ്ങളിൽ, useState മാത്രം ഉപയോഗിക്കുന്നത് സങ്കീർണ്ണവും കൈകാര്യം ചെയ്യാൻ പ്രയാസമുള്ളതുമായ കോഡിലേക്ക് നയിച്ചേക്കാം. ഒരൊറ്റ ഇവന്റിനോട് പ്രതികരിച്ചുകൊണ്ട് ഒന്നിലധികം സ്റ്റേറ്റ് വേരിയബിളുകൾ അപ്ഡേറ്റ് ചെയ്യുന്നത് ബുദ്ധിമുട്ടായി മാറും, കൂടാതെ ഈ അപ്‌ഡേറ്റുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ലോജിക്ക് കമ്പോണന്റിലുടനീളം ചിതറിക്കിടക്കും, ഇത് മനസ്സിലാക്കാനും പരിപാലിക്കാനും പ്രയാസകരമാക്കുന്നു. ഇവിടെയാണ് useReducer ന്റെ പ്രാധാന്യം.

useReducer ഹുക്ക് പരിചയപ്പെടാം

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

useReducer ഹുക്ക് രണ്ട് ആർഗ്യുമെന്റുകൾ എടുക്കുന്നു:

ഈ ഹുക്ക് രണ്ട് ഘടകങ്ങൾ അടങ്ങുന്ന ഒരു അറേ തിരികെ നൽകുന്നു:

റിഡ്യൂസർ ഫംഗ്ഷൻ

റിഡ്യൂസർ ഫംഗ്ഷൻ useReducer പാറ്റേണിന്റെ ഹൃദയമാണ്. ഇത് ഒരു പ്യുവർ ഫംഗ്ഷനാണ്, അതായത് ഇതിന് സൈഡ് ഇഫക്റ്റുകൾ ഒന്നും ഉണ്ടാകരുത് (API കോളുകൾ നടത്തുകയോ ഗ്ലോബൽ വേരിയബിളുകൾ മാറ്റുകയോ പോലുള്ളവ), ഒരേ ഇൻപുട്ടിന് എല്ലായ്പ്പോഴും ഒരേ ഔട്ട്പുട്ട് നൽകണം. റിഡ്യൂസർ ഫംഗ്ഷൻ രണ്ട് ആർഗ്യുമെന്റുകൾ എടുക്കുന്നു:

റിഡ്യൂസർ ഫംഗ്ഷനുള്ളിൽ, വ്യത്യസ്ത ആക്ഷൻ തരങ്ങൾ കൈകാര്യം ചെയ്യാനും അതനുസരിച്ച് സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യാനും നിങ്ങൾ ഒരു switch സ്റ്റേറ്റ്മെന്റ് അല്ലെങ്കിൽ if/else if സ്റ്റേറ്റ്മെന്റുകൾ ഉപയോഗിക്കുന്നു. ഇത് നിങ്ങളുടെ സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ലോജിക്ക് കേന്ദ്രീകരിക്കുകയും വ്യത്യസ്ത ഇവന്റുകളോട് പ്രതികരിച്ച് സ്റ്റേറ്റ് എങ്ങനെ മാറുന്നു എന്ന് മനസ്സിലാക്കാൻ എളുപ്പമാക്കുകയും ചെയ്യുന്നു.

ഡിസ്‌പാച്ച് ഫംഗ്ഷൻ

സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ ട്രിഗർ ചെയ്യാൻ നിങ്ങൾ ഉപയോഗിക്കുന്ന രീതിയാണ് ഡിസ്‌പാച്ച് ഫംഗ്ഷൻ. നിങ്ങൾ dispatch(action) എന്ന് വിളിക്കുമ്പോൾ, ആക്ഷൻ റിഡ്യൂസർ ഫംഗ്ഷനിലേക്ക് കൈമാറുന്നു, അത് ആക്ഷന്റെ തരവും പേലോഡും അനുസരിച്ച് സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുന്നു.

ഒരു പ്രായോഗിക ഉദാഹരണം: ഒരു കൗണ്ടർ നടപ്പിലാക്കുന്നു

നമുക്ക് ഒരു ലളിതമായ ഉദാഹരണം ഉപയോഗിച്ച് തുടങ്ങാം: ഒരു കൗണ്ടർ കമ്പോണന്റ്. കൂടുതൽ സങ്കീർണ്ണമായ ഉദാഹരണങ്ങളിലേക്ക് പോകുന്നതിന് മുമ്പ് ഇത് അടിസ്ഥാന ആശയങ്ങൾ വ്യക്തമാക്കുന്നു. നമുക്ക് വർദ്ധിപ്പിക്കാനും കുറയ്ക്കാനും റീസെറ്റ് ചെയ്യാനും കഴിയുന്ന ഒരു കൗണ്ടർ നിർമ്മിക്കാം:


import React, { useReducer } from 'react';

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

// Define the reducer function
function counterReducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    case RESET:
      return { count: 0 };
    default:
      return state;
  }
}

function Counter() {
  // Initialize useReducer
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>എണ്ണം: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT })}>വർദ്ധിപ്പിക്കുക</button>
      <button onClick={() => dispatch({ type: DECREMENT })}>കുറയ്ക്കുക</button>
      <button onClick={() => dispatch({ type: RESET })}>റീസെറ്റ്</button>
    </div>
  );
}

export default Counter;

ഈ ഉദാഹരണത്തിൽ:

കൗണ്ടർ ഉദാഹരണം വികസിപ്പിക്കുന്നു: പേലോഡ് ചേർക്കുന്നു

ഒരു നിശ്ചിത മൂല്യം ഉപയോഗിച്ച് കൗണ്ടർ വർദ്ധിപ്പിക്കാൻ അനുവദിക്കുന്ന തരത്തിൽ നമുക്ക് കൗണ്ടർ പരിഷ്കരിക്കാം. ഇത് ഒരു ആക്ഷനിലെ പേലോഡ് എന്ന ആശയം പരിചയപ്പെടുത്തുന്നു:


import React, { useReducer } from 'react';

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const RESET = 'RESET';
const SET_VALUE = 'SET_VALUE';

function counterReducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + action.payload };
    case DECREMENT:
      return { count: state.count - action.payload };
    case RESET:
      return { count: 0 };
    case SET_VALUE:
      return { count: action.payload };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });
  const [inputValue, setInputValue] = React.useState(1);

  return (
    <div>
      <p>എണ്ണം: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT, payload: parseInt(inputValue) || 1 })}>{inputValue} വെച്ച് വർദ്ധിപ്പിക്കുക</button>
      <button onClick={() => dispatch({ type: DECREMENT, payload: parseInt(inputValue) || 1 })}>{inputValue} വെച്ച് കുറയ്ക്കുക</button>
      <button onClick={() => dispatch({ type: RESET })}>റീസെറ്റ്</button>
       <input
         type="number"
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
       />
      </div>
  );
}

export default Counter;

ഈ വികസിപ്പിച്ച ഉദാഹരണത്തിൽ:

useReducer ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനങ്ങൾ

സങ്കീർണ്ണമായ സ്റ്റേറ്റ് മാനേജ്മെന്റിനായി useState നേരിട്ട് ഉപയോഗിക്കുന്നതിനേക്കാൾ useReducer പാറ്റേൺ നിരവധി ഗുണങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു:

എപ്പോഴാണ് useReducer ഉപയോഗിക്കേണ്ടത്

useReducer കാര്യമായ പ്രയോജനങ്ങൾ വാഗ്ദാനം ചെയ്യുമ്പോൾ, ഇത് എല്ലായ്പ്പോഴും ശരിയായ തിരഞ്ഞെടുപ്പല്ല. എപ്പോഴാണ് useReducer ഉപയോഗിക്കേണ്ടതെന്ന് പരിഗണിക്കുക:

ലളിതമായ സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾക്ക്, useState പലപ്പോഴും പര്യാപ്തവും ഉപയോഗിക്കാൻ എളുപ്പവുമാണ്. തീരുമാനമെടുക്കുമ്പോൾ നിങ്ങളുടെ സ്റ്റേറ്റിന്റെ സങ്കീർണ്ണതയും വളർച്ചയ്ക്കുള്ള സാധ്യതയും പരിഗണിക്കുക.

നൂതന ആശയങ്ങളും സാങ്കേതികതകളും

useReducer കോൺടെക്സ്റ്റുമായി സംയോജിപ്പിക്കുന്നു

ഗ്ലോബൽ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുന്നതിനോ ഒന്നിലധികം കമ്പോണന്റുകളിലുടനീളം സ്റ്റേറ്റ് പങ്കിടുന്നതിനോ, നിങ്ങൾക്ക് useReducer റിയാക്റ്റിന്റെ കോൺടെക്സ്റ്റ് എപിഐയുമായി സംയോജിപ്പിക്കാം. അധിക ഡിപൻഡൻസികൾ അവതരിപ്പിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കാത്ത ചെറുതും ഇടത്തരവുമായ പ്രോജക്റ്റുകൾക്ക് റിഡക്സിനേക്കാൾ ഈ സമീപനമാണ് പലപ്പോഴും അഭികാമ്യം.


import React, { createContext, useReducer, useContext } from 'react';

// Define action types and reducer (as before)
const INCREMENT = 'INCREMENT';
// ... (other action types and the counterReducer function)

const CounterContext = createContext();

function CounterProvider({ children }) {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
}

function useCounter() {
  return useContext(CounterContext);
}

function Counter() {
  const { state, dispatch } = useCounter();

  return (
    <div>
      <p>എണ്ണം: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT })}>വർദ്ധിപ്പിക്കുക</button>
    </div>
  );
}

function App() {
  return (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  );
}

export default App;

ഈ ഉദാഹരണത്തിൽ:

useReducer ടെസ്റ്റ് ചെയ്യുന്നു

റിഡ്യൂസറുകൾ പ്യുവർ ഫംഗ്ഷനുകളായതിനാൽ അവയെ ടെസ്റ്റ് ചെയ്യുന്നത് ലളിതമാണ്. ജെസ്റ്റ് അല്ലെങ്കിൽ മോക്ക പോലുള്ള ഒരു യൂണിറ്റ് ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്ക് ഉപയോഗിച്ച് നിങ്ങൾക്ക് റിഡ്യൂസർ ഫംഗ്ഷൻ ഒറ്റയ്ക്ക് എളുപ്പത്തിൽ ടെസ്റ്റ് ചെയ്യാൻ കഴിയും. ജെസ്റ്റ് ഉപയോഗിച്ചുള്ള ഒരു ഉദാഹരണം ഇതാ:


import { counterReducer } from './counterReducer'; // Assuming counterReducer is in a separate file

const INCREMENT = 'INCREMENT';

describe('counterReducer', () => {
  it('should increment the count', () => {
    const state = { count: 0 };
    const action = { type: INCREMENT };
    const newState = counterReducer(state, action);
    expect(newState.count).toBe(1);
  });

   it('should return the same state for unknown action types', () => {
        const state = { count: 10 };
        const action = { type: 'UNKNOWN_ACTION' };
        const newState = counterReducer(state, action);
        expect(newState).toBe(state); // Assert that the state hasn't changed
    });
});

നിങ്ങളുടെ റിഡ്യൂസറുകൾ ടെസ്റ്റ് ചെയ്യുന്നത് അവ പ്രതീക്ഷിച്ചപോലെ പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുകയും നിങ്ങളുടെ സ്റ്റേറ്റ് ലോജിക് റീഫാക്ടർ ചെയ്യുന്നത് എളുപ്പമാക്കുകയും ചെയ്യുന്നു. കരുത്തുറ്റതും പരിപാലിക്കാൻ കഴിയുന്നതുമായ ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിൽ ഇതൊരു നിർണായക ഘട്ടമാണ്.

മെമ്മോയിസേഷൻ ഉപയോഗിച്ച് പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നു

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


import React, { useReducer, useMemo } from 'react';

function reducer(state, action) {
  // ... (reducer logic) 
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  // Calculate a derived value, memoizing it with useMemo
  const derivedValue = useMemo(() => {
    // Expensive calculation based on state
    return state.value1 + state.value2;
  }, [state.value1, state.value2]); // Dependencies:  recalculate only when these values change

  return (
    <div>
      <p>ഡിറൈവ്ഡ് മൂല്യം: {derivedValue}</p>
      <button onClick={() => dispatch({ type: 'UPDATE_VALUE1', payload: 10 })}>മൂല്യം 1 അപ്‌ഡേറ്റ് ചെയ്യുക</button>
      <button onClick={() => dispatch({ type: 'UPDATE_VALUE2', payload: 20 })}>മൂല്യം 2 അപ്‌ഡേറ്റ് ചെയ്യുക</button>
    </div>
  );
}

ഈ ഉദാഹരണത്തിൽ, state.value1 അല്ലെങ്കിൽ state.value2 മാറുമ്പോൾ മാത്രം derivedValue കണക്കാക്കുന്നു, ഓരോ റീ-റെൻഡറിലും അനാവശ്യമായ കണക്കുകൂട്ടലുകൾ തടയുന്നു. ഒപ്റ്റിമൽ റെൻഡറിംഗ് പ്രകടനം ഉറപ്പാക്കുന്നതിനുള്ള ഒരു സാധാരണ രീതിയാണ് ഈ സമീപനം.

യഥാർത്ഥ ലോക ഉദാഹരണങ്ങളും ഉപയോഗ സാഹചര്യങ്ങളും

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

1. ഇ-കൊമേഴ്‌സ് ഉൽപ്പന്ന ഫിൽട്ടറുകൾ

ഒരു വലിയ ഉൽപ്പന്ന കാറ്റലോഗുള്ള ഒരു ഇ-കൊമേഴ്‌സ് വെബ്സൈറ്റ് (ആഗോളതലത്തിൽ ലഭ്യമായ ആമസോൺ അല്ലെങ്കിൽ അലിഎക്സ്പ്രസ് പോലുള്ള പ്രശസ്തമായ പ്ലാറ്റ്‌ഫോമുകളെക്കുറിച്ച് ചിന്തിക്കുക) സങ്കൽപ്പിക്കുക. ഉപയോക്താക്കൾക്ക് വിവിധ മാനദണ്ഡങ്ങൾ അനുസരിച്ച് ഉൽപ്പന്നങ്ങൾ ഫിൽട്ടർ ചെയ്യേണ്ടതുണ്ട് (വില പരിധി, ബ്രാൻഡ്, വലുപ്പം, നിറം, ഉത്ഭവ രാജ്യം മുതലായവ). ഫിൽട്ടർ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യാൻ useReducer അനുയോജ്യമാണ്.


import React, { useReducer } from 'react';

const initialState = {
  priceRange: { min: 0, max: 1000 },
  brand: [], // Array of selected brands
  color: [], // Array of selected colors
  //... other filter criteria
};

function filterReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_PRICE_RANGE':
      return { ...state, priceRange: action.payload };
    case 'TOGGLE_BRAND':
      const brand = action.payload;
      return { ...state, brand: state.brand.includes(brand) ? state.brand.filter(b => b !== brand) : [...state.brand, brand] };
    case 'TOGGLE_COLOR':
      // Similar logic for color filtering
      return { ...state, color: state.color.includes(action.payload) ? state.color.filter(c => c !== action.payload) : [...state.color, action.payload] };
    // ... other filter actions
    default:
      return state;
  }
}

function ProductFilter() {
  const [state, dispatch] = useReducer(filterReducer, initialState);

  // UI components for selecting filter criteria and triggering dispatch actions
  // For example: Range input for price, checkboxes for brands, etc.

  return (
    <div>
      <!-- Filter UI elements -->
    </div>
  );
}

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

2. മൾട്ടി-സ്റ്റെപ്പ് ഫോമുകൾ (ഉദാ. അന്താരാഷ്ട്ര ഷിപ്പിംഗ് ഫോമുകൾ)

അന്താരാഷ്ട്ര ഷിപ്പിംഗിനോ സങ്കീർണ്ണമായ ആവശ്യകതകളുള്ള ഉപയോക്തൃ അക്കൗണ്ടുകൾ ഉണ്ടാക്കുന്നതിനോ ഉപയോഗിക്കുന്നതുപോലുള്ള മൾട്ടി-സ്റ്റെപ്പ് ഫോമുകൾ പല ആപ്ലിക്കേഷനുകളിലും ഉൾപ്പെടുന്നു. അത്തരം ഫോമുകളുടെ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുന്നതിൽ useReducer മികച്ചുനിൽക്കുന്നു.


import React, { useReducer } from 'react';

const initialState = {
  step: 1, // Current step in the form
  formData: {
    firstName: '',
    lastName: '',
    address: '',
    city: '',
    country: '',
    // ... other form fields
  },
  errors: {},
};

function formReducer(state, action) {
  switch (action.type) {
    case 'NEXT_STEP':
      return { ...state, step: state.step + 1 };
    case 'PREV_STEP':
      return { ...state, step: state.step - 1 };
    case 'UPDATE_FIELD':
      return { ...state, formData: { ...state.formData, [action.payload.field]: action.payload.value } };
    case 'SET_ERRORS':
      return { ...state, errors: action.payload };
    case 'SUBMIT_FORM':
      // Handle form submission logic here, e.g., API calls
      return state;
    default:
      return state;
  }
}

function MultiStepForm() {
  const [state, dispatch] = useReducer(formReducer, initialState);

  // Rendering logic for each step of the form
  // Based on the current step in the state
  const renderStep = () => {
    switch (state.step) {
      case 1:
        return <Step1 formData={state.formData} dispatch={dispatch} />;
      case 2:
        return <Step2 formData={state.formData} dispatch={dispatch} />;
      // ... other steps
      default:
        return <p>അസാധുവായ ഘട്ടം</p>;
    }
  };

  return (
    <div>
      {renderStep()}
      <!-- Navigation buttons (Next, Previous, Submit) based on the current step -->
    </div>
  );
}

വ്യത്യസ്ത ഫോം ഫീൽഡുകൾ, ഘട്ടങ്ങൾ, സാധ്യമായ വാലിഡേഷൻ പിശകുകൾ എന്നിവ ഘടനാപരവും പരിപാലിക്കാൻ കഴിയുന്നതുമായ രീതിയിൽ എങ്ങനെ കൈകാര്യം ചെയ്യാമെന്ന് ഇത് വ്യക്തമാക്കുന്നു. ഉപയോക്തൃ-സൗഹൃദ രജിസ്ട്രേഷൻ അല്ലെങ്കിൽ ചെക്ക്ഔട്ട് പ്രക്രിയകൾ നിർമ്മിക്കുന്നതിന് ഇത് നിർണായകമാണ്, പ്രത്യേകിച്ച് ഫേസ്ബുക്ക് അല്ലെങ്കിൽ വീചാറ്റ് പോലുള്ള വിവിധ പ്ലാറ്റ്ഫോമുകളിലെ അവരുടെ പ്രാദേശിക ആചാരങ്ങളെയും അനുഭവങ്ങളെയും അടിസ്ഥാനമാക്കി വ്യത്യസ്ത പ്രതീക്ഷകളുള്ള അന്താരാഷ്ട്ര ഉപയോക്താക്കൾക്ക്.

3. തത്സമയ ആപ്ലിക്കേഷനുകൾ (ചാറ്റ്, സഹകരണ ടൂളുകൾ)

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


import React, { useReducer, useEffect } from 'react';

const initialState = {
  messages: [],
  users: [],
  connectionStatus: 'connecting',
};

function chatReducer(state, action) {
  switch (action.type) {
    case 'RECEIVE_MESSAGE':
      return { ...state, messages: [...state.messages, action.payload] };
    case 'USER_JOINED':
      return { ...state, users: [...state.users, action.payload] };
    case 'USER_LEFT':
      return { ...state, users: state.users.filter(user => user.id !== action.payload.id) };
    case 'SET_CONNECTION_STATUS':
      return { ...state, connectionStatus: action.payload };
    default:
      return state;
  }
}

function ChatRoom() {
  const [state, dispatch] = useReducer(chatReducer, initialState);

  useEffect(() => {
    // Establish WebSocket connection (example):
    const socket = new WebSocket('wss://your-websocket-server.com');

    socket.onopen = () => dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'connected' });
    socket.onmessage = (event) => dispatch({ type: 'RECEIVE_MESSAGE', payload: JSON.parse(event.data) });
    socket.onclose = () => dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'disconnected' });

    return () => socket.close(); // Cleanup on unmount
  }, []);

  // Render messages, user list, and connection status based on the state
  return (
    <div>
      <p>കണക്ഷൻ നില: {state.connectionStatus}</p>
      <!-- UI for displaying messages, user list, and sending messages -->
    </div>
  );
}

ഒരു തത്സമയ ചാറ്റ് കൈകാര്യം ചെയ്യുന്നതിനുള്ള അടിസ്ഥാനം ഈ ഉദാഹരണം നൽകുന്നു. സ്റ്റേറ്റ് സന്ദേശ സംഭരണം, നിലവിൽ ചാറ്റിലുള്ള ഉപയോക്താക്കൾ, കണക്ഷൻ നില എന്നിവ കൈകാര്യം ചെയ്യുന്നു. വെബ്സോക്കറ്റ് കണക്ഷൻ സ്ഥാപിക്കുന്നതിനും വരുന്ന സന്ദേശങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിനും useEffect ഹുക്കിന് ഉത്തരവാദിത്തമുണ്ട്. ഈ സമീപനം ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്ക് സേവനം നൽകുന്ന പ്രതികരണാത്മകവും ചലനാത്മകവുമായ ഒരു യൂസർ ഇന്റർഫേസ് സൃഷ്ടിക്കുന്നു.

useReducer ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ

useReducer ഫലപ്രദമായി ഉപയോഗിക്കുന്നതിനും പരിപാലിക്കാൻ കഴിയുന്ന ആപ്ലിക്കേഷനുകൾ സൃഷ്ടിക്കുന്നതിനും, ഈ മികച്ച രീതികൾ പരിഗണിക്കുക:

ഉപസംഹാരം

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

റിയാക്റ്റ് ഡെവലപ്‌മെന്റിലേക്ക് നിങ്ങൾ ആഴത്തിൽ ഇറങ്ങുമ്പോൾ, നിങ്ങളുടെ ടൂൾകിറ്റിലേക്ക് useReducer പാറ്റേൺ ഉൾപ്പെടുത്തുന്നത് തീർച്ചയായും വൃത്തിയുള്ളതും കൂടുതൽ വിപുലീകരിക്കാവുന്നതും എളുപ്പത്തിൽ പരിപാലിക്കാൻ കഴിയുന്നതുമായ കോഡ്ബേസുകളിലേക്ക് നയിക്കും. നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ നിർദ്ദിഷ്ട ആവശ്യകതകൾ എപ്പോഴും പരിഗണിക്കുകയും ഓരോ സാഹചര്യത്തിനും സ്റ്റേറ്റ് മാനേജ്മെന്റിനുള്ള മികച്ച സമീപനം തിരഞ്ഞെടുക്കുകയും ചെയ്യുക. ഹാപ്പി കോഡിംഗ്!