સમજણ, અને માં Redux Store Actions Reducers React

Redux-સંચાલિત એપ્લિકેશનમાં, આર્કિટેક્ચર ત્રણ મુખ્ય ખ્યાલોની આસપાસ ફરે છે: Redux store, actions, અને reducers. ચાલો આ દરેક વિભાવનાઓમાં ઊંડાણપૂર્વક તપાસ કરીએ અને જોઈએ કે તેઓ કેવી રીતે એકસાથે કામ કરે છે.

Redux Store

Redux store એ સત્યનો એકમાત્ર સ્ત્રોત છે જે તમારી અરજીની સંપૂર્ણ સ્થિતિ ધરાવે છે. તે આવશ્યકપણે JavaScript ઑબ્જેક્ટ છે જેમાં સમગ્ર એપ્લિકેશન સ્થિતિનું પ્રતિનિધિત્વ કરતો ડેટા શામેલ છે. તમે Redux લાઇબ્રેરીમાંથી ફંક્શનનો store ઉપયોગ કરીને બનાવો છો. createStore

Actions

Actions સાદા JavaScript ઑબ્જેક્ટ્સ છે જે એપ્લિકેશનમાં બનેલી કોઈ વસ્તુનું વર્ણન કરે છે. તેઓ એક type ક્ષેત્ર ધરાવે છે જે દર્શાવે છે કે કઈ પ્રકારની ક્રિયા કરવામાં આવી રહી છે, અને વધારાના ડેટાનો પણ સમાવેશ કરી શકાય છે. Actions એક્શન ક્રિએટર્સનો ઉપયોગ કરીને બનાવવામાં આવે છે, જે ફંક્શન્સ છે જે એક્શન ઑબ્જેક્ટ પરત કરે છે. દાખ્લા તરીકે:

// Action Types  
const ADD_TODO = 'ADD_TODO';  
  
// Action Creator  
const addTodo =(text) => {  
  return {  
    type: ADD_TODO,  
    payload: text  
  };  
};  

Reducers

Reducers ના જવાબમાં એપ્લિકેશનની સ્થિતિ કેવી રીતે બદલાય છે તેનો ઉલ્લેખ કરો actions. રીડ્યુસર એ શુદ્ધ કાર્ય છે જે વર્તમાન સ્થિતિ અને ક્રિયાને દલીલો તરીકે લે છે અને નવી સ્થિતિ પરત કરે છે. Reducers ફંક્શનનો ઉપયોગ કરીને સિંગલ રૂટ રીડ્યુસરમાં જોડવામાં આવે છે combineReducers. અહીં એક સરળ ઉદાહરણ છે:

// Reducer  
const todosReducer =(state = [], action) => {  
  switch(action.type) {  
    case ADD_TODO:  
      return [...state, action.payload];  
    default:  
      return state;  
  }  
};  
  
// Combine Reducers  
const rootReducer = combineReducers({  
  todos: todosReducer,  
  // ...other reducers  
});  

સાથે કામ કરવુ

જ્યારે તમે ફંક્શનનો ઉપયોગ કરીને કોઈ ક્રિયા મોકલો છો dispatch, ત્યારે Redux ક્રિયાને બધાને ફોરવર્ડ કરે છે reducers. દરેક રીડ્યુસર તપાસ કરે છે કે શું ક્રિયાનો પ્રકાર તેના પોતાના સાથે મેળ ખાય છે અને તે મુજબ રાજ્યના સંબંધિત ભાગને અપડેટ કરે છે. અપડેટ કરેલી સ્થિતિ પછી Redux માં સંગ્રહિત થાય છે store, અને કોઈપણ કનેક્ટેડ ઘટકો નવી સ્થિતિના આધારે ફરીથી રેન્ડર થાય છે.

ઉદાહરણ દૃશ્ય

ટૂડો લિસ્ટ એપ્લિકેશનની કલ્પના કરો. ADD_TODO જ્યારે વપરાશકર્તા એક નવું TODO ઉમેરે છે, ત્યારે એક ક્રિયા પેલોડ તરીકે TODO ના પ્રકાર અને ટેક્સ્ટ સાથે મોકલવામાં આવે છે. todos રીડ્યુસર આ ક્રિયા મેળવે છે, રાજ્યમાં નવા todo ઉમેરે છે, અને અપડેટ કરેલી સ્થિતિ પરત કરે છે.

નિષ્કર્ષ

કેવી રીતે Redux store, actions, અને reducers ક્રિયાપ્રતિક્રિયા કરે છે તે સમજવું અસરકારક રાજ્ય વ્યવસ્થાપન માટે નિર્ણાયક છે. આ આર્કિટેક્ચર ચિંતાઓના સ્પષ્ટ અલગતાને સુનિશ્ચિત કરે છે અને જટિલ એપ્લિકેશન સ્થિતિઓને સંચાલિત કરવાનું સરળ બનાવે છે. જેમ જેમ તમે Redux સાથે વિકાસ કરવાનું ચાલુ રાખશો તેમ, આ ખ્યાલો તમારી રાજ્ય વ્યવસ્થાપન વ્યૂહરચનાનો પાયો બનાવશે.