রিফ্রেশে আমি কীভাবে রিডেক্স রাজ্য গাছ বজায় রাখতে পারি?

Question 1

রেডাক্স ডকুমেন্টেশনের প্রথম অধ্যক্ষ হলেন:

আপনার সম্পূর্ণ অ্যাপ্লিকেশনটির স্থিতি একটি স্টোরের মধ্যে কোনও বস্তু গাছে সংরক্ষণ করা হয়।

এবং আমি আসলে ভেবেছিলাম যে আমি সমস্ত প্রিন্সিপালকে ভাল করে বুঝতে পারি। তবে আমি এখন বিভ্রান্ত হয়ে পড়েছি আবেদনের অর্থ কী।

যদি অ্যাপ্লিকেশনটির অর্থ ওয়েবসাইটটির জটিল জটিল অংশগুলির মধ্যে একটি এবং কেবলমাত্র একটি পৃষ্ঠায় কাজ করে তবে আমি বুঝতে পারি। কিন্তু যদি অ্যাপ্লিকেশনটির অর্থ পুরো ওয়েবসাইট হয়? রাজ্যের গাছ রাখার জন্য আমার কি লোকালস্টোরেজ বা কুকি বা অন্য কিছু ব্যবহার করা উচিত? তবে যদি ব্রাউজার লোকালস্টোরেশন সমর্থন না করে?

আমি জানতে চাই যে বিকাশকারীরা কীভাবে তাদের রাষ্ট্র গাছ রাখে! :)

Question 2

আপনি যদি কোনও ব্রাউজার রিফ্রেশ জুড়ে আপনার রডেক্স রাজ্যটি ধরে রাখতে চান, তবে রিডেক্স মিডলওয়্যার ব্যবহার করে এটি করা ভাল। পরীক্ষা করে দেখুন redux-জিদ এবং redux-স্টোরেজ মিডলওয়্যার। তারা উভয়ই আপনার রিডেক্স রাজ্যটি সংরক্ষণ করার একই কাজটি সম্পাদন করার চেষ্টা করে যাতে এটি সংরক্ষণ করা যায় এবং ইচ্ছামতো লোড হতে পারে।

-

সম্পাদনা করুন

আমি এই প্রশ্নটি পুনর্বিবেচনা করেছেন এমন কিছু সময় হয়েছে, কিন্তু অন্যটি (আরও উত্সাহিত উত্তর হওয়া সত্ত্বেও) আপনার নিজের সমাধানটি ঘূর্ণায়মানকে উত্সাহিত করে দেখে আমি বুঝতে পেরেছিলাম যে আমি এটি আবার উত্তর দেব answer

এই সম্পাদনা হিসাবে, দুটি লাইব্রেরি গত ছয় মাসের মধ্যে আপডেট করা হয়েছে। আমার দলটি কয়েক বছর ধরে উত্পাদনে রডেক্স-অবিরাম ব্যবহার করে আসছে এবং এতে কোনও সমস্যা হয়নি।

এটি একটি সাধারণ সমস্যার মতো মনে হলেও, আপনি দ্রুত আবিষ্কার করতে পারেন যে আপনার নিজের সমাধানটি ঘূর্ণায়মান কেবল রক্ষণাবেক্ষণের বোঝা তৈরি করে না, তবে বাগ এবং কার্য সম্পাদন সংক্রান্ত সমস্যার ফলস্বরূপ। মাথায় আসা প্রথম উদাহরণগুলি হ'ল:

JSON.stringifyএবং JSON.parseযখন প্রয়োজন হবে না শুধুমাত্র পারফরম্যান্সকে আঘাত করতে পারে তবে ত্রুটিগুলি ছুঁড়ে ফেলতে পারে যে যখন আপনার রিডেক্স স্টোরের মতো কোনও জটিল কোডে হাতছাড়া করা আপনার অ্যাপ্লিকেশনটিকে ক্র্যাশ করতে পারে।
(নীচের উত্তরে আংশিকভাবে উল্লেখ করা হয়েছে): কখন এবং কীভাবে আপনার অ্যাপের অবস্থা সংরক্ষণ এবং পুনরুদ্ধার করবেন তা নির্ধারণ করা কোনও সাধারণ সমস্যা নয়। এটি প্রায়শই করুন এবং আপনি কার্যকারিতা ক্ষতিগ্রস্থ করবেন। পর্যাপ্ত নয়, বা যদি রাজ্যের ভুল অংশগুলি বজায় থাকে তবে আপনি আরও বাগ সহ নিজেকে খুঁজে পেতে পারেন। উপরে উল্লিখিত লাইব্রেরিগুলি তাদের পদ্ধতির বিরুদ্ধে যুদ্ধ-পরীক্ষিত এবং তাদের আচরণকে অনুকূলিতকরণের কয়েকটি দুর্দান্ত বোকা-প্রমাণ সরবরাহ করে।
রিডেক্সের সৌন্দর্যের অংশ (বিশেষত প্রতিক্রিয়া বাস্তুসংস্থায়) একাধিক পরিবেশে স্থাপন করার দক্ষতা। এই সম্পাদনা হিসাবে, রিডেক্স- সিস্টে রয়েছে 15 টি বিভিন্ন স্টোরেজ বাস্তবায়ন , ওয়েবের জন্য দারুণ লোকাল ফোরেজ লাইব্রেরি , পাশাপাশি রিএ্যাক্ট নেটিভ, ইলেক্ট্রন এবং নোডের সমর্থন।

সংক্ষেপে, 3 কেবি মিনিফায়েড + গিজিপযুক্ত (এই সম্পাদনার সময়ে) এটি কোনও সমস্যা নয় আমি নিজের দলকে নিজেই সমাধান করতে বলব।

Question 3

25-আগস্ট -2018 সম্পাদনা করুন

যেমনটি একটি মন্তব্যে বলা হয়েছে। আসল রিডেক্স-স্টোরেজ প্যাকেজটি রিঅ্যাক্ট স্ট্যাকের দিকে সরানো হয়েছে । এই পদ্ধতির এখনও আপনার নিজস্ব রাষ্ট্র পরিচালনার সমাধান বাস্তবায়নের উপর দৃষ্টি নিবদ্ধ করা হয়।

আসল উত্তর

প্রদত্ত উত্তরটি যখন এক পর্যায়ে বৈধ ছিল তখন এটি লক্ষ্য করা গুরুত্বপূর্ণ যে আসল রিডেক্স-স্টোরেজ প্যাকেজটি অবচয় করা হয়েছে এবং এটি আর রক্ষণাবেক্ষণ করা হচ্ছে না ...

প্যাকেজ রিডেক্স-স্টোরেজের মূল লেখক প্রকল্পটিকে হ্রাস করার সিদ্ধান্ত নিয়েছে এবং আর রক্ষণাবেক্ষণ করা হবে না।

এখন, ভবিষ্যতে এই জাতীয় সমস্যা এড়াতে যদি আপনি অন্যান্য প্যাকেজগুলির উপর নির্ভরতা রাখতে না চান তবে আপনার নিজের সমাধানটি রোল করা খুব সহজ।

আপনাকে যা করতে হবে তা হ'ল:

1- এমন একটি ফাংশন তৈরি করুন যা স্টেটটি হাইড্রেট করার জন্য দ্বিতীয় প্যারামিটারের মধ্যে থেকে রাজ্যকে ফেরত দেয় localStorageএবং তারপরে রাজ্যটিকে createStore'রডুএক্স' ফাংশনে স্থান দেয়

 const store = createStore(appReducers, state);

2- রাষ্ট্র পরিবর্তনের জন্য শুনুন এবং প্রতিবারের মতো রাষ্ট্র পরিবর্তন হয়, রাষ্ট্রকে এতে সংরক্ষণ করুন localStorage

store.subscribe(() => {
    //this is just a function that saves state to localStorage
    saveState(store.getState());
});

এবং এটি হ'ল ... আমি আসলে উত্পাদনের ক্ষেত্রে অনুরূপ কিছু ব্যবহার করি, তবে ফাংশনগুলি ব্যবহার না করে, আমি নীচের মতো একটি খুব সাধারণ ক্লাস লিখেছিলাম ...

class StateLoader {

    loadState() {
        try {
            let serializedState = localStorage.getItem("http://contoso.com:state");

            if (serializedState === null) {
                return this.initializeState();
            }

            return JSON.parse(serializedState);
        }
        catch (err) {
            return this.initializeState();
        }
    }

    saveState(state) {
        try {
            let serializedState = JSON.stringify(state);
            localStorage.setItem("http://contoso.com:state", serializedState);

        }
        catch (err) {
        }
    }

    initializeState() {
        return {
              //state object
            }
        };
    }
}

এবং তারপরে আপনার অ্যাপটি বুটস্ট্র্যাপ করার সময় ...

import StateLoader from "./state.loader"

const stateLoader = new StateLoader();

let store = createStore(appReducers, stateLoader.loadState());

store.subscribe(() => {
    stateLoader.saveState(store.getState());
});

আশা করি এটি কারও সাহায্য করবে

পারফরম্যান্স নোট

যদি আপনার অ্যাপ্লিকেশনটিতে রাজ্যের পরিবর্তনগুলি খুব ঘন ঘন হয় তবে স্থানীয় স্টোরেজে সংরক্ষণ করা আপনার আবেদনের কার্যকারিতা ক্ষতিগ্রস্থ করতে পারে, বিশেষত যদি সিরিয়ালাইজ / ডিসাইরিয়ালাইজ করার জন্য স্টেট অবজেক্ট গ্রাফটি বড় হয়। এইসব ক্ষেত্রে, আপনি debounce করতে চান বা ফাংশন যা ব্যবহার localStorage রাজ্যের সংরক্ষণ রোধ পারে RxJs, lodashবা অনুরূপ কিছু।

Question 4

এটি লিওর উত্তরের উপর ভিত্তি করে (এটি কোনও গ্রহণযোগ্য উত্তর হওয়া উচিত কারণ এটি কোনও তৃতীয় পক্ষের libs ব্যবহার না করে প্রশ্নের উদ্দেশ্য অর্জন করে)।

আমি একটি সিঙ্গলটন ক্লাস তৈরি করেছি যা একটি রেডাক্স স্টোর তৈরি করে, স্থানীয় স্টোরেজ ব্যবহার করে এটি চালিয়ে যায় এবং গেটারের মাধ্যমে তার স্টোরটিতে সহজ অ্যাক্সেসের অনুমতি দেয় ।

এটি ব্যবহার করতে, কেবলমাত্র আপনার মূল শ্রেণীর চারপাশে নিম্নলিখিত রেডাক্স-সরবরাহকারী উপাদানটি রাখুন:

// ... Your other imports
import PersistedStore from "./PersistedStore";

ReactDOM.render(
  <Provider store={PersistedStore.getDefaultStore().store}>
    <MainClass />
  </Provider>,
  document.getElementById('root')
);

এবং আপনার প্রকল্পে নিম্নলিখিত ক্লাস যুক্ত করুন:

import {
  createStore
} from "redux";

import rootReducer from './RootReducer'

const LOCAL_STORAGE_NAME = "localData";

class PersistedStore {

  // Singleton property
  static DefaultStore = null;

  // Accessor to the default instance of this class
  static getDefaultStore() {
    if (PersistedStore.DefaultStore === null) {
      PersistedStore.DefaultStore = new PersistedStore();
    }

    return PersistedStore.DefaultStore;
  }

  // Redux store
  _store = null;

  // When class instance is used, initialize the store
  constructor() {
    this.initStore()
  }

  // Initialization of Redux Store
  initStore() {
    this._store = createStore(rootReducer, PersistedStore.loadState());
    this._store.subscribe(() => {
      PersistedStore.saveState(this._store.getState());
    });
  }

  // Getter to access the Redux store
  get store() {
    return this._store;
  }

  // Loading persisted state from localStorage, no need to access
  // this method from the outside
  static loadState() {
    try {
      let serializedState = localStorage.getItem(LOCAL_STORAGE_NAME);

      if (serializedState === null) {
        return PersistedStore.initialState();
      }

      return JSON.parse(serializedState);
    } catch (err) {
      return PersistedStore.initialState();
    }
  }

  // Saving persisted state to localStorage every time something
  // changes in the Redux Store (This happens because of the subscribe() 
  // in the initStore-method). No need to access this method from the outside
  static saveState(state) {
    try {
      let serializedState = JSON.stringify(state);
      localStorage.setItem(LOCAL_STORAGE_NAME, serializedState);
    } catch (err) {}
  }

  // Return whatever you want your initial state to be
  static initialState() {
    return {};
  }
}

export default PersistedStore;

স্নিপেট প্রসারিত করুন