কীভাবে আমি বিক্রিয়া নেটিভ রিডাক্সের অ্যারেতে একটি উপাদান যুক্ত করব?

Question

আমি কীভাবে আমার arr[]রেডাক্সারে রেডেক্স রাজ্যের অ্যারেতে উপাদান যুক্ত করব ? আমি এটা করছি-

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

কোনও পরিবর্তনকে ছাড়াই একটি অ্যারেতে আইটেম যুক্ত করতে দুটি ভিন্ন বিকল্প options

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

অথবা

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

Comments

কোনটি পছন্দনীয় হিসাবে বিবেচনা করা উচিত?

— সাফ্ট

@ সাফট যদি আপনি ES6 তে কোড লিখছেন তবে প্রথমে পছন্দ করুন যা আরও বেশি পঠনযোগ্য এবং মার্জিত আইএমও।

— ইয়াদু কিরণ

এছাড়াও, প্রথমটি খাঁটি, দ্বিতীয়টি নয়। রেডাক্স ডক্স থেকে: "এটি খুব গুরুত্বপূর্ণ যে রিডুডারটি খাঁটি থাকে। যেমন তারিখ.নো () বা ম্যাথ.র্যান্ডম ()।

— কমনীয় রোবট

হ্যালো, @ যধুকিরণ আপনি আমাকে ব্যাখ্যা করতে পারবেন কেন অ্যারের দ্বিতীয় সূচকে আমরা কেন এটি খুব ভাল বুঝতে পারি না? 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' ] }নিউ ওবজের জন্য যা আমার প্রয়োজনের জন্য যথেষ্ট ভাল। তবে আমি একই ফলাফল তৈরি করতে স্প্রেড অপারেটর ছাড়াই অবজেক্ট.সেসাইন ব্যবহার করতে চেয়েছিলাম। এটা কি সম্ভব?

— ভেনেসা

@ ভেনেসা আমি অনুমান করি যে আপনি ইএস 6 [].concat(obj.data, ['e'])বৈশিষ্ট্যগুলি ব্যবহার করতে না চাইলে আপনি এটি প্রতিস্থাপন করতে পারেন । অবজেক্ট.সেসাইন বস্তুর জন্য বোঝানো হয়, এবং এটি আপনাকে অ্যারেতে ব্যবহার করতে কোনও ত্রুটি দেয় না তবে ফলাফলটি অ্যারেগুলিকে সংক্ষেপণ করে না। যদি আপনি চেষ্টা করেন 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

আমি এখানে হোঁচট খেয়েছি ... যদিও এই উত্তরটি উপরের প্রশ্নের সাথে ঠিক ফিট করে না। যাইহোক, এটি ঠিক আমি যা খুঁজছিলাম ছিল। আমি কোনও অ্যারেতে একটি নির্দিষ্ট সূচীতে কোনও বস্তুটি সন্নিবেশ করার জন্য উপায় খুঁজছিলাম। সুতরাং, আমি উত্তর আপ ভোট দিয়েছি। এটি খুব সহায়ক ছিল এবং কিছু সময় বাঁচায়। ধন্যবাদ!

— সর্বনাশ

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

কিছু বর্ণনা যুক্ত করুন

— স্পেটাল