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




reactjs redux (3)

টি এল; ডিআর

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

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

সাধারণভাবে, 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 দ্বিতীয় createStore ছিল। এটি আপনার রিডুসারকে প্রথমবারের মধ্যে দিয়ে দেওয়া state passed যখন রেডাক্স সূচনা করে তখন এটি রাজ্য পূরণের জন্য একটি "ডামি" ক্রিয়া প্রেরণ করে। সুতরাং আপনার counter রিডিউসারকে অপরিজ্ঞাত সমান state সাথে ডাকা হয়েছিল। এটি হ'ল ডিফল্ট যুক্তিটিকে "সক্রিয়" করে। অতএব, ডিফল্ট state মান ( state = 0 ) অনুযায়ী 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() ব্যবহার 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 ব্যতীত createStore কল createStore এটি initialState {} শুরু করতে চলেছে {} সুতরাং, state.a এবং state.b এটিকে a এবং b state.b কল করার সময় দ্বারা state.b হবে। উভয় এবং b হ্রাসকারীরা তাদের state আর্গুমেন্ট হিসাবে অপরিবর্তিত পাবেন এবং যদি তারা ডিফল্ট state মান নির্দিষ্ট করে দেয় তবে সেগুলি ফিরিয়ে দেওয়া হবে। এইভাবে সম্মিলিত হ্রাসকারক প্রথম অনুরোধে একটি { 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() এর আর্গুমেন্ট হিসাবে নির্দিষ্ট করেছি। সম্মিলিত হ্রাসকারক থেকে ফিরে আসা রাষ্ট্রটি আমি 'wat' ডিফল্ট আর্গুমেন্টের সাথে a হ্রাসকারকের জন্য নির্ধারিত প্রাথমিক অবস্থার সাথে একত্রিত করেছি যা b রিডুসার নিজেই বেছে নিয়েছিল।

সম্মিলিত হ্রাসকারক কী করে তা স্মরণ করি:

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

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

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

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

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


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

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

const rootReducer = combineReducers({ todos, users })

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

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

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

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

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

function todoApp(state = initialState, action)

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





redux