স্টোরের রেডাক্স রিডাক্সারের প্রাথমিক অবস্থা পড়ুন

Question 1

একটি Redux অ্যাপ্লিকেশন মধ্যে প্রাথমিক অবস্থা দুটি উপায়ে সেট করা যেতে পারে:

এটি দ্বিতীয় তর্ক হিসাবে যুক্ত করুন createStore( ডক্স লিঙ্ক )
এটি আপনার (উপ) হ্রাসকারীদের ( দস্তাবেজের লিঙ্ক ) প্রথম যুক্তি হিসাবে পাস করুন

আপনি যদি আপনার স্টোরটিতে প্রাথমিক অবস্থা পাস করেন তবে আপনি কীভাবে স্টোর থেকে সেই রাজ্যটি পড়বেন এবং এটি আপনার হ্রাসকারীদের মধ্যে প্রথম যুক্তি তৈরি করবেন?

Question 2

টিএল; ডিআর

combineReducers()বা অনুরূপ ম্যানুয়াল কোড ছাড়াই , হ্রাসকারীকে initialStateসর্বদা জয় করে state = ...কারণ হ্রাসকারীর কাছে stateপাস হয় initialState এবং হয় না undefined , সুতরাং ES6 আর্গুমেন্ট সিনট্যাক্স এই ক্ষেত্রে প্রয়োগ হয় না।

সঙ্গে combineReducers()আচরণ আরো nuanced হয়। যাদের হ্রাসকারীদের রাজ্য নির্দিষ্ট করা হয়েছে তারা initialStateতা গ্রহণ করবে state। অন্যান্য হ্রাসকারীরা পাবেন undefined এবং সে কারণেstate = ... তারা নির্দিষ্ট করা ডিফল্ট যুক্তিতে ফিরে আসবে ।

সাধারণভাবে, initialStateহ্রাসকারক দ্বারা নির্দিষ্ট রাষ্ট্রের উপর জয়লাভ করে। এটি হ্রাসকারীদের প্রাথমিক ডেটা নির্দিষ্ট করতে দেয় যা তাদের ডিফল্ট আর্গুমেন্ট হিসাবে উপলব্ধি করে , তবে আপনি যখন কিছু ধ্রুবক স্টোরেজ বা সার্ভার থেকে স্টোরটি হাইড্রেট করছেন তখন বিদ্যমান ডেটা (সম্পূর্ণ বা আংশিক) লোড করার অনুমতি দেয়।

প্রথমে এমন একটি মামলা বিবেচনা করা যাক যেখানে আপনার একক রিডুসার রয়েছে।
বলুন আপনি ব্যবহার করবেন না combineReducers()।

তারপরে আপনার রিডুসারটি দেখতে দেখতে এটির মতো হতে পারে:

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT': return state + 1;
  case 'DECREMENT': return state - 1;
  default: return state;
  }
}

এখন ধরা যাক আপনি এটির সাথে একটি দোকান তৈরি করেন।

import { createStore } from 'redux';
let store = createStore(counter);
console.log(store.getState()); // 0

প্রাথমিক অবস্থা শূন্য। কেন? কারণ দ্বিতীয় যুক্তি createStoreছিল undefined। এটি stateআপনার রিডুসারকে প্রথমবারের মতো পাস হয়েছে। যখন রেডাক্স সূচনা করে তখন এটি রাজ্য পূরণের জন্য "ডামি" ক্রিয়া প্রেরণ করে। সুতরাং আপনার counterহ্রাসকারীকে stateসমান সাথে ডাকা হয়েছিল undefined। এটি হ'ল ডিফল্ট যুক্তিটিকে "সক্রিয়" করে। সুতরাং, stateএখন 0ডিফল্ট stateমান ( state = 0) অনুসারে। এই রাষ্ট্রটি ( 0) ফিরিয়ে দেওয়া হবে।

আসুন একটি ভিন্ন দৃশ্য বিবেচনা করুন:

import { createStore } from 'redux';
let store = createStore(counter, 42);
console.log(store.getState()); // 42

এবার কেন 42, এবং না 0? কারণ দ্বিতীয় যুক্তি হিসাবে createStoreডাকা হয়েছিল 42। এই যুক্তিটি stateডামি অ্যাকশনের পাশাপাশি আপনার হ্রাসকারীর কাছে প্রেরণ হয়ে যায় । এবার, stateঅপরিজ্ঞাত নয় (এটি 42!), সুতরাং ES6 ডিফল্ট আর্গুমেন্ট সিনট্যাক্সের কোনও প্রভাব নেই। stateহয় 42, এবং 42হ্রাসকারক থেকে ফিরিয়ে দেওয়া হয়।

এখন আপনি যেখানে ব্যবহার করেন এমন একটি মামলা বিবেচনা করুন combineReducers()।
আপনার দু'জন হ্রাসকারী রয়েছে:

function a(state = 'lol', action) {
  return state;
}

function b(state = 'wat', action) {
  return state;
}

উত্পাদিত হ্রাসকারকটি combineReducers({ a, b })দেখতে দেখতে এরকম:

// const combined = combineReducers({ a, b })
function combined(state = {}, action) {
  return {
    a: a(state.a, action),
    b: b(state.b, action)
  };
}

আমরা যদি কল createStoreছাড়া initialState, এটা আরম্ভ করতে যাচ্ছে stateকরার {}। অতএব, state.aএবং state.bহতে হবে undefinedসময় এটি কল দ্বারা aএবং breducers। উভয় aএবং bহ্রাসকারী তাদের আর্গুমেন্ট undefinedহিসাবে গ্রহণ করবে এবং যদি তারা ডিফল্ট মান নির্দিষ্ট করে দেয় তবে সেগুলি ফিরিয়ে দেওয়া হবে। statestateএইভাবে সম্মিলিত হ্রাসকারক { a: 'lol', b: 'wat' }প্রথম অনুরোধে একটি রাষ্ট্রের বস্তুটি ফেরত দেয়।

import { createStore } from 'redux';
let store = createStore(combined);
console.log(store.getState()); // { a: 'lol', b: 'wat' }

আসুন একটি ভিন্ন দৃশ্য বিবেচনা করুন:

import { createStore } from 'redux';
let store = createStore(combined, { a: 'horse' });
console.log(store.getState()); // { a: 'horse', b: 'wat' }

এখন আমি initialStateযুক্তি হিসাবে উল্লেখ করেছি createStore()। সম্মিলিত হ্রাসকারক থেকে ফিরে আসা রাষ্ট্রটি আমি হ্রাসকারীর জন্য নির্ধারিত প্রাথমিক অবস্থার সাথে ডিফল্ট আর্গুমেন্টের সাথে মিশ্রিত করে যা রেডিউসার নিজেই বেছে নিয়েছিল।a'wat'b

আসুন স্মরণ করা যাক সম্মিলিত হ্রাসকারী কী করে:

// const combined = combineReducers({ a, b })
function combined(state = {}, action) {
  return {
    a: a(state.a, action),
    b: b(state.b, action)
  };
}

এই ক্ষেত্রে, stateনির্দিষ্ট করা হয়েছিল যাতে এটি পিছনে পড়ে না {}। এটি aসমান ক্ষেত্র সহ একটি বস্তু ছিল 'horse', তবে bক্ষেত্র ছাড়াই । এই কারণেই aহ্রাসকারক এটি 'horse'হিসাবে গ্রহণ করেছে stateএবং আনন্দের সাথে এটি ফিরিয়ে দিয়েছে, তবে bরিডিউসারটি এটি undefinedহিসাবে পেয়েছে stateএবং এভাবেই এটি ডিফল্ট ধারণাটি ফিরে আসে state(আমাদের উদাহরণে, 'wat')। এভাবেই আমরা বিনিময়ে পাই { a: 'horse', b: 'wat' }।

সংক্ষিপ্তসার হিসাবে, আপনি যদি রেডাক্স কনভেনশনগুলিতে অবিচল থাকেন এবং হ্রাসকারীদের যখন তাদের যুক্তি undefinedহিসাবে ডাকা হবে তখন প্রাথমিক অবস্থাটি ফিরিয়ে আনুন state(এটি বাস্তবায়নের সহজতম উপায় হল stateES6 ডিফল্ট আর্গুমেন্ট মান নির্দিষ্ট করা ), আপনি যাচ্ছেন সম্মিলিত হ্রাসকারীদের জন্য একটি দুর্দান্ত দরকারী আচরণ। আপনি ফাংশনে যে initialStateবস্তুটি পাস করবেন তাতে তারা সংশ্লিষ্ট মানটিকে পছন্দ করবে createStore()তবে আপনি যদি কোনওটি পাস না করেন, বা যদি সংশ্লিষ্ট ক্ষেত্রটি সেট না করা stateহয় তবে তার পরিবর্তে রিডুসার দ্বারা নির্দিষ্ট ডিফল্ট আর্গুমেন্টটি বেছে নেওয়া হবে।এই পদ্ধতিরটি ভালভাবে কাজ করে কারণ এটি বিদ্যমান ডেটার সূচনা এবং হাইড্রেশন উভয়ই সরবরাহ করে, তবে পৃথক হ্রাসকারীদের যদি তাদের ডেটা সংরক্ষণ না করা হয় তবে তাদের রাষ্ট্র পুনরায় সেট করতে দেয়। অবশ্যই আপনি এই প্যাটার্নটি পুনরাবৃত্তভাবে প্রয়োগ করতে পারেন, আপনি combineReducers()অনেক স্তরে ব্যবহার করতে পারেন , এমনকি হ্রাসকারীদের কল করে এবং রাষ্ট্র গাছের প্রাসঙ্গিক অংশটি দিয়ে ম্যানুয়ালি হ্রাসকারীদের রচনা করতে পারেন ।

Question 3

সংক্ষেপে: এটি হ'ল রেডাক্স যিনি প্রাথমিক অবস্থার হ্রাসকারীদের কাছে যান, আপনাকে কিছু করার দরকার নেই।

আপনি যখন কল createStore(reducer, [initialState])করবেন তখন রেডাক্সকে প্রথম ক্রিয়াকলাপটি আসার পরে হ্রাসকারীর কাছে পাঠানো প্রাথমিক অবস্থা কী তা জানাতে দিচ্ছেন।

আপনি যে দ্বিতীয় বিকল্পটি উল্লেখ করেছেন, কেবলমাত্র তখনই প্রয়োগ হয় যখন আপনি দোকানটি তৈরি করার সময় কোনও প্রাথমিক অবস্থা পাস করেন না। অর্থাত্

function todoApp(state = initialState, action)

রাষ্ট্র কেবলমাত্র তখনই চালু করা হবে যদি রেডাক্সের দ্বারা পাস করা কোনও রাজ্য না থাকে

Question 4

আপনি কীভাবে স্টোর থেকে সেই রাজ্যটি পড়েন এবং এটি আপনার হ্রাসকারীদের মধ্যে প্রথম যুক্তি তৈরি করবেন?

combineReducers () আপনার জন্য কাজটি করে। এটি লেখার প্রথম উপায়টি সত্যই সহায়ক নয়:

const rootReducer = combineReducers({ todos, users })

তবে অন্যটি, এটি সমতুল্য আরও স্পষ্ট:

function rootReducer(state, action) {
   todos: todos(state.todos, action),
   users: users(state.users, action)
}

Question 5

আমি আশা করি এটি আপনার অনুরোধের জবাব দিয়েছে (যা আমি অন্তর্বর্তী স্থানে যাওয়ার সময় এবং রাষ্ট্রটি ফেরত দেওয়ার সময় হ্রাসকারীদের সূচনা হিসাবে বুঝতে পেরেছিলাম)

আমরা এটি কীভাবে করি (সতর্কতা: টাইপস্ক্রিপ্ট কোড থেকে অনুলিপি করা হয়)।

এর সংক্ষিপ্তসার if(!state)হ'ল মেইনরেডুসার (কারখানা) ফাংশনে পরীক্ষা

function getInitialState(): MainState {

     return {
         prop1:                 'value1',
         prop1:                 'value2',
         ...        
     }
}



const reducer = combineReducers(
    {
        main:     mainReducer( getInitialState() ),
        ...
    }
)



const mainReducer = ( initialState: MainState ): Reducer => {

    return ( state: MainState, action: Action ): MainState => {

        if ( !state ) {
            return initialState
        }

        console.log( 'Main reducer action: ', action ) 

        switch ( action.type ) {
            ....
        }
    }
}