কিভাবে রেডাক্স হ্রাসকারক স্থানে অ্যাক্সেস করতে?

Question 1

আমার একটি হ্রাসকারক রয়েছে এবং নতুন রাজ্যটি গণনা করার জন্য আমার ক্রিয়া থেকে ডেটা এবং এই রিডিউসার দ্বারা পরিচালিত নয় এমন রাজ্যের কোনও অংশের ডেটাও প্রয়োজন। বিশেষত, রিডিউসারটিতে আমি নীচে দেখাব, আমার accountDetails.stateOfResidenceIdক্ষেত্রে ক্ষেত্রটি অ্যাক্সেস দরকার ।

প্রাথমিক স্টেট.জেএস:

export default {
    accountDetails: {
        stateOfResidenceId: '',
        accountType: '',
        accountNumber: '',
        product: ''
    },
    forms: {
        blueprints: [

        ]
    }
};

ফর্মসডুডের.জেএস:

import * as types from '../constants/actionTypes';
import objectAssign from 'object-assign';
import initialState from './initialState';
import formsHelper from '../utils/FormsHelper';
export default function formsReducer(state = initialState.forms, action) {
  switch (action.type) {
    case types.UPDATE_PRODUCT: {
        //I NEED accountDetails.stateOfResidenceId HERE
        console.log(state);
        const formBlueprints = formsHelper.getFormsByProductId(action.product.id);
        return objectAssign({}, state, {blueprints: formBlueprints});
    }

    default:
      return state;
  }
}

index.js (রুট রিডুসার):

import { combineReducers } from 'redux';
import accountDetails from './accountDetailsReducer';
import forms from './formsReducer';

const rootReducer = combineReducers({
    accountDetails,
    forms
});

export default rootReducer;

আমি এই ক্ষেত্রটি কীভাবে অ্যাক্সেস করতে পারি?

Question 2

আমি এটির জন্য থঙ্ক ব্যবহার করব , এখানে একটি উদাহরণ:

export function updateProduct(product) {
  return (dispatch, getState) => {
    const { accountDetails } = getState();

    dispatch({
      type: UPDATE_PRODUCT,
      stateOfResidenceId: accountDetails.stateOfResidenceId,
      product,
    });
  };
}

মূলত আপনি অ্যাকশনে আপনার প্রয়োজনীয় সমস্ত ডেটা পাবেন, তারপরে আপনি সেই তথ্যটি আপনার রিডুসারকে প্রেরণ করতে পারবেন।

Question 3

আপনার বিকল্পগুলি হয় কেবলমাত্র ব্যবহার ছাড়াও আরও যুক্তি combineReducersরচনা করা বা ক্রিয়ায় আরও ডেটা অন্তর্ভুক্ত করা। রেডাক্স এফএকিউ এ বিষয়টিকে অন্তর্ভুক্ত করে:

https://redux.js.org/faq/reducers/

এছাড়াও, আমি বর্তমানে "স্ট্রাকচারিং রিডুসারস" শীর্ষক রেডাক্স ডক্সের পৃষ্ঠাগুলির একটি নতুন সেটটিতে কাজ করছি, যা আপনাকে সহায়ক মনে হতে পারে। বর্তমানের ডাব্লুআইপি পৃষ্ঠাগুলি https://github.com/markerikson/redux/blob/structuring-reducers-page/docs/recips/StructuringReducers.md এ রয়েছে ।

Question 4

আমি নিশ্চিত নই যে এই দৃষ্টিভঙ্গিটি একটি বিরোধী-প্যাটার্ন কিনা তবে এটি আমার পক্ষে কাজ করেছিল। আপনার ক্রিয়ায় একটি ত্রিযুক্ত ফাংশন ব্যবহার করুন।

export const myAction = (actionData) => (dispatch, getState) => {
   dispatch({
      type: 'SOME_ACTION_TYPE',
      data: actionData,
      state: getState()
   });
}

Question 5

আপনার নিজস্ব সম্মিলন ফাংশনটি লেখা সহজ যা আপনি যা চান ঠিক তা করে:

import accountDetails from './accountDetailsReducer';
import forms from './formsReducer';

const rootReducer = (state, action) => {
        const newState = {};

        newState.accountDetails = accountDetails(state.accountDetails, action);
        newState.forms = forms(state.forms, action, state.accountDetails);

        return newState;
    };

export default rootReducer;

আপনার ফর্মড্রেসারটি তখন হ'ল:

export default function formsReducer(state = initialState.forms, action, accountDetails) {

ফর্মস রিডিউসারের এখন অ্যাকাউন্টের বিবরণে অ্যাক্সেস রয়েছে।

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

Question 6

আমি আপনাকে নির্দেশ দিচ্ছি যে আপনি এটিকে ক্রিয়া স্রষ্টার কাছে দিয়ে গেছেন। সুতরাং কোথাও কোথাও আপনার অ্যাকশন স্রষ্টা থাকবেন যা এরকম কিছু করে:

updateProduct(arg1, arg2, stateOfResidenceId) {
  return {
    type: UPDATE_PRODUCT,
    stateOfResidenceId
  }
}

আপনি যে জায়গায় ক্রিয়াটি ট্রিগার করেছেন, ধরে নিন যে আপনি প্রতিক্রিয়া ব্যবহার করছেন, আপনি ব্যবহার করতে পারেন

function mapStateToProps(state, ownProps) {
  return {
    stateOfResidenceId: state.accountdetails.stateOfResidenceId
  }  
}

এবং প্রতিক্রিয়া-রিডেক্সের সংযোগটি ব্যবহার করে আপনার প্রতিক্রিয়া উপাদানটিতে সংযুক্ত করুন।

connect(mapStateToProps)(YourReactComponent);

এখন, আপনার প্রতিক্রিয়া উপাদানটিতে যেখানে আপনি অ্যাকশন আপডেট প্রোডাক্টটি ট্রিগার করেন সেখানে আপনার প্রস্তাব হিসাবে স্টেটঅফ্রিসিডেন্স হওয়া উচিত, এবং আপনি এটিকে আপনার অ্যাকশন নির্মাতার কাছে দিতে পারেন।

এটি সংশ্লেষিত মনে হলেও এটি উদ্বেগের বিচ্ছেদ সম্পর্কে সত্যই।

Question 7

আপনি ব্যবহার করার চেষ্টা করতে পারেন:

রিডেক্স-নামকরণ-হ্রাসকারী

যা আপনাকে আপনার কোডের মতো কোথাও রাজ্য পেতে দেয়:

const localState1 = getState(reducerA.state1)
const localState2 = getState(reducerB.state2)

তবে প্রথমে চিন্তা করুন যদি বাহ্যিক অবস্থাকে অ্যাকশনের পেডলোড হিসাবে উত্তরণ করা ভাল হয়।

Question 8

একটি বিকল্প উপায়, যদি আপনি প্রতিক্রিয়া-রিডেক্স ব্যবহার করেন এবং কেবলমাত্র এক জায়গায় সেই ক্রিয়াটি প্রয়োজন হয় বা এইচওসি তৈরির ক্ষেত্রে ভাল থাকেন (উচ্চতর ওডার উপাদান, আপনার যে জায়গাতেই দরকার সেখানে গুরুত্বপূর্ণ জিনিসটি এটি আপনার এইচটিএমএলকে ফুলে উঠতে পারে) তা সত্যিই বুঝতে হবে না অ্যাক্সেসটি হ'ল অতিরিক্ত পরামিতিগুলি ক্রিয়াকলাপের সাথে একত্রীকরণগুলি ব্যবহার করা :

const mapState = ({accountDetails: {stateOfResidenceId}}) => stateOfResidenceId;

const mapDispatch = (dispatch) => ({
  pureUpdateProduct: (stateOfResidenceId) => dispatch({ type: types.UPDATE_PRODUCT, payload: stateOfResidenceId })
});

const mergeProps = (stateOfResidenceId, { pureUpdateProduct}) => ({hydratedUpdateProduct: () => pureUpdateProduct(stateOfResidenceId )});

const addHydratedUpdateProduct = connect(mapState, mapDispatch, mergeProps)

export default addHydratedUpdateProduct(ReactComponent);

export const OtherHydratedComponent = addHydratedUpdateProduct(OtherComponent)

আপনি যখন সেখানে মার্জপ্রপোসগুলি ব্যবহার করবেন তখন আপনি যা যাবেন সেগুলি প্রপসগুলিতে যুক্ত হবে, মানচিত্রের স্ট্যাট এবং মানচিত্রডিশপ্যাচ কেবল মার্জপ্রপসের জন্য আর্গুমেন্ট সরবরাহ করবে। সুতরাং, অন্য কথায়, এই ফাংশন এটি আপনার উপাদান প্রপসগুলিতে যুক্ত করবে (টাইপস্ক্রিপ্ট সিনট্যাক্স):

{hydratedUpdateProduct: () => void}

(নোট করুন যে ফাংশনটি আসলে ক্রিয়াটি নিজেই দেয় এবং অকার্যকর নয়, তবে আপনি বেশিরভাগ ক্ষেত্রে এটিকে এড়িয়ে যাবেন)।

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

const mapState = ({ accountDetails }) => accountDetails;

const mapDispatch = (dispatch) => ({
  pureUpdateProduct: (stateOfResidenceId) => dispatch({ type: types.UPDATE_PRODUCT, payload: stateOfResidenceId })
  otherAction: (param) => dispatch(otherAction(param))
});

const mergeProps = ({ stateOfResidenceId, ...passAlong }, { pureUpdateProduct, ... otherActions}) => ({
  ...passAlong,
  ...otherActions,
  hydratedUpdateProduct: () => pureUpdateProduct(stateOfResidenceId ),
});

const reduxPropsIncludingHydratedAction= connect(mapState, mapDispatch, mergeProps)

export default reduxPropsIncludingHydratedAction(ReactComponent);

এটি প্রপসগুলিতে নিম্নলিখিত জিনিসগুলি সরবরাহ করবে:

{
  hydratedUpdateProduct: () => void,
  otherAction: (param) => void,
  accountType: string,
  accountNumber: string,
  product: string,
}

সামগ্রিকভাবে যদিও সম্পূর্ণ অপ্রয়োজনীয়ভাবে রিডেক্স-রক্ষণাবেক্ষণকারীরা তাদের প্যাকেজটির কার্যকারিতা প্রসারিত করে যাতে এই জাতীয় শুভেচ্ছাকে ভাল উপায়ে অন্তর্ভুক্ত করা যায়, যা বাস্তুসংস্থানের বিভাজনকে সমর্থনকারী ছাড়াই এই কার্যকারিতাগুলির জন্য একটি নিদর্শন তৈরি করে, চিত্তাকর্ষক।

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

Question 9

কোনও ক্রিয়া প্রেরণের সময়, আপনি একটি প্যারামিটার পাস করতে পারেন। এই ক্ষেত্রে, আপনি accountDetails.stateOfResidenceIdঅ্যাকশনে পাস করতে পারেন এবং তারপরে পেডলোড হিসাবে এটি হ্রাসকারীকে দিতে পারেন।