ਸਮਝ, ਅਤੇ ਵਿੱਚ 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 ਜਦੋਂ ਇੱਕ ਉਪਭੋਗਤਾ ਇੱਕ ਨਵਾਂ ਟੋਡੋ ਜੋੜਦਾ ਹੈ, ਤਾਂ ਇੱਕ ਕਾਰਵਾਈ ਨੂੰ ਪੇਲੋਡ ਦੇ ਰੂਪ ਵਿੱਚ ਟੋਡੋ ਦੀ ਕਿਸਮ ਅਤੇ ਟੈਕਸਟ ਨਾਲ ਭੇਜਿਆ ਜਾਂਦਾ ਹੈ । ਟੋਡੋ ਰੀਡਿਊਸਰ ਇਸ ਕਾਰਵਾਈ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਰਾਜ ਵਿੱਚ ਨਵਾਂ ਟੋਡੋ ਜੋੜਦਾ ਹੈ, ਅਤੇ ਅੱਪਡੇਟ ਕੀਤੀ ਸਥਿਤੀ ਵਾਪਸ ਕਰਦਾ ਹੈ।

ਸਿੱਟਾ

ਇਹ ਸਮਝਣਾ ਕਿ ਕਿਵੇਂ Redux store, actions, ਅਤੇ reducers ਪਰਸਪਰ ਪ੍ਰਭਾਵੀ ਰਾਜ ਪ੍ਰਬੰਧਨ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਇਹ ਆਰਕੀਟੈਕਚਰ ਚਿੰਤਾਵਾਂ ਦੇ ਸਪਸ਼ਟ ਵਿਛੋੜੇ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਗੁੰਝਲਦਾਰ ਐਪਲੀਕੇਸ਼ਨ ਰਾਜਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ। ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ Redux ਦੇ ਨਾਲ ਵਿਕਾਸ ਕਰਨਾ ਜਾਰੀ ਰੱਖਦੇ ਹੋ, ਇਹ ਧਾਰਨਾਵਾਂ ਤੁਹਾਡੀ ਰਾਜ ਪ੍ਰਬੰਧਨ ਰਣਨੀਤੀ ਦੀ ਨੀਂਹ ਬਣਾਉਣਗੀਆਂ।