मैं रिएक्ट के मूल Redux में सरणी में एक तत्व कैसे जोड़ूं?

Question

मैं arr[]reducer में redux राज्य के अपने सरणी में तत्व कैसे जोड़ूं ? मैं यह कर रहा हूं-

import {ADD_ITEM} from '../Actions/UserActions'
const initialUserState = {
    arr:[]
}

export default function userState(state = initialUserState, action)
{
    console.log(arr);
    switch (action.type)
    {
        case ADD_ITEM: 
            return { 
                      ...state,
                      arr: state.arr.push([action.newItem])
                   }

        default:
            return state
    }
}

Answer 1

म्यूटेशन के बिना किसी सरणी में आइटम जोड़ने के लिए दो अलग-अलग विकल्प

case ADD_ITEM :
    return { 
        ...state,
        arr: [...state.arr, action.newItem]
    }

या

case ADD_ITEM :
    return { 
        ...state,
        arr: state.arr.concat(action.newItem)
    }

Comments

किसको बेहतर माना जाना चाहिए?

— सैफट

@ यदि आप ES6 में कोड लिख रहे हैं तो पहले वाले को पसंद करें जो अधिक पठनीय और सुरुचिपूर्ण IMO है।

— यदु किरन

इसके अलावा, पहला शुद्ध है, दूसरा नहीं है। Redux डॉक्स से: "यह बहुत महत्वपूर्ण है कि रिड्यूसर शुद्ध रहता है। जिन चीजों को आपको रिड्यूसर के अंदर कभी नहीं करना चाहिए: 1. उसके तर्कों को म्यूट करें। 2. एपीआई कॉल और रूटिंग ट्रांज़िशन जैसे साइड इफेक्ट्स करें; 3. नॉन-प्योर फ़ंक्शंस को कॉल करें; उदा। Date.now () या Math.random ()। "

— चार्मिंग रोबॉट

नमस्कार, @YadhuKiran आप मुझे समझा सकते हैं कि हम उस सरणी के दूसरे सूचकांक में नया मान क्यों जोड़ सकते हैं जो मैं बहुत अच्छी तरह से नहीं समझ सका? arr: [...state.arr, why here?]

— ओलिवर डी

@ ओलिवर, जब प्रसार सिंटैक्स को ऊपर के रूप में उपयोग किया जाता है, तो यह दूसरे इंडेक्स पर तत्व नहीं डाल रहा है, लेकिन अंतिम इंडेक्स पर। इसके विपरीत, [action.newItem, ...state.arr]पहली स्थिति में तत्व सम्मिलित करेगा।

— यदु किरण

Answer 2

pushसरणी को वापस नहीं करता है, लेकिन इसकी लंबाई ( डॉक्स ), इसलिए आप जो कर रहे हैं वह सरणी को उसकी लंबाई के साथ बदल रहा है, केवल उसी संदर्भ को खो देता है जो आपके पास था। इसे इस्तेमाल करे:

import {ADD_ITEM} from '../Actions/UserActions'
const initialUserState = {

    arr:[]
}

export default function userState(state = initialUserState, action){
     console.log(arr);
     switch (action.type){
        case ADD_ITEM :
          return { 
             ...state,
             arr:[...state.arr, action.newItem]
        }

        default:return state
     }
}

Comments

क्या Object.assignराज्य के अंदर सरणी के बदलाव के लिए कोई इस सवाल का जवाब दे सकता है ?

— वेनेसा

आपको आवश्यकता क्यों है Object.assign? इसका उपयोग वस्तुओं के लिए किया जाता है, और यह मूल रूप से एक ही चीज है। जहां आपके पास है, arr:[...state.arr, action.newItem]आप उसका उपयोग कर सकते हैं obj: Object.assign({}, state.obj, action.newItem, बशर्ते कि वह objऔर newItemवस्तुएं हों। यदि आप पूरे राज्य में ऐसा करना चाहते हैं, तो आप बस कर सकते हैंObject.assign({}, state, {arr: [..state.arr, action.newItem]})

— मार्टीनारियो

@ स्मार्टिनारियो , धन्यवाद तो मैंने किया: var obj = { isLoading: true, data: ['a', 'b', 'c', 'd'] } var newObj = Object.assign({}, obj, { data: [...obj.data, 'e'] });और यह मुझे यह देता है: { isLoading: true, data: [ 'a', 'b', 'c', 'd', 'e' ] }newObj के लिए जो मुझे बहुत अच्छा लगता है। लेकिन मैं एक ही परिणाम का उत्पादन करने के लिए प्रसार ऑपरेटर के बिना Object.assign का उपयोग करना चाहता था। क्या यह संभव है?

— वेनेसा

@Vennesa मुझे लगता है कि आप इसे बदल सकते हैं [].concat(obj.data, ['e']), अगर आप ES6 सुविधाओं का उपयोग नहीं करना चाहते हैं। Object.assign वस्तुओं के लिए होता है, और यद्यपि यह आपको किसी सरणी पर इसका उपयोग करने के लिए कोई त्रुटि नहीं देगा, परिणाम सरणियों का एक संगति नहीं है। यदि आप कोशिश करते हैं Object.assign({}, [1, 2, 3], [4]), तो आपको [4, 2, 3]परिणाम मिलता है ।

— मार्टीनारियो

Answer 3

यदि आपको सरणी में एक विशिष्ट स्थिति में सम्मिलित करने की आवश्यकता है, तो आप यह कर सकते हैं:

case ADD_ITEM :
    return { 
        ...state,
        arr: [
            ...state.arr.slice(0, action.pos),
            action.newItem,
            ...state.arr.slice(action.pos),
        ],
    }

Comments

मैं यहाँ लड़खड़ा गया ... हालाँकि यह जवाब ऊपर दिए गए सवाल पर बिलकुल फिट नहीं बैठता। फिर भी, यह वही था जिसकी मुझे तलाश थी। मैं एक सरणी में एक विशिष्ट सूचकांक में एक वस्तु को सम्मिलित करने के तरीके की तलाश कर रहा था। इसलिए, मैंने जवाब को वोट दिया। यह बहुत मददगार था और मुझे कुछ समय बचा रहा। धन्यवाद!

— omostan

Answer 4

मेरे पास एक नमूना है

import * as types from '../../helpers/ActionTypes';

var initialState = {
  changedValues: {}
};
const quickEdit = (state = initialState, action) => {

  switch (action.type) {

    case types.PRODUCT_QUICKEDIT:
      {
        const item = action.item;
        const changedValues = {
          ...state.changedValues,
          [item.id]: item,
        };

        return {
          ...state,
          loading: true,
          changedValues: changedValues,
        };
      }
    default:
      {
        return state;
      }
  }
};

export default quickEdit;

Comments

कुछ विवरण जोड़ें

— SPatel