بهبود Reducer-های ریداکس به ۳ روش مختلف — به زبان ساده

در این مقاله به بررسی چگونگی بهبود Reducer-های ریداکس به 3 روش مختلف با استفاده از اشیا، کلاس‌ها و برنامه‌نویسی تابعی می‌پردازیم. پیش‌فرض ما این است که شما با «ریداکس» (Redux) (+) و کاری که Reducer-ها انجام می‌دهند آشنایی دارید. تلاش ما بر این است که Reducer-های ریداکس را سریع‌تر سازیم و از دریافت هشدار یا خطای «پیچیدگی چرخه‌ای» (cyclomatic complexity) جلوگیری کنیم. این نوع پیچیدگی‌ها ممکن است در چیزهایی مانند SonarQube زمانی که تعداد اکشن‌ها افزایش می‌یابند رخ دهند.

در ادامه مثالی از گزاره switch می‌بینید که احتمالاً در 99% مثال‌های Redux یا Reducer-ها دیده‌اید:

switch (action.type) {
  case ShowsAction.REQUEST_SHOW_FINISHED:
    return {
      ...state,
      show: action.payload,
    };
  case ShowsAction.REQUEST_EPISODES_FINISHED:
    return {
      ...state,
      episodes: action.payload,
    };
  default:
    return state;
}

ما قصد داریم این مثال را با استفاده از dictionary بهبود بخشیم.

دیکشنری (جفت کلید-مقدار)

دیکشنری صرفاً یک شیء جاوا اسکریپت است که می‌توان مقدار رشته‌ای را به عنوان کلید به آن اضافه کرده و مقداری به آن انتساب داد. در ادامه نسخه ساده‌شده‌ای از ازآنچه قصد داریم بسازیم را می‌بینید. توجه کنید که کلید نام type اکشن و مقدار انتسابی تابعی است که حالت کنونی و payload را به عنوان آرگومان می‌گیرد تا یک حالت جدید بسازد.

const dictionary = {};
// Add keys to the dictionary
dictionary['REQUEST_SHOW_FINISHED'] = (state, payload) => {
  return {
    ...state,
    show: payload,
  }
};
dictionary['REQUEST_EPISODES_FINISHED'] = (state, payload) => {
  return {
    ...state,
    episodes: payload,
  }
};
dictionary['REQUEST_CAST_FINISHED'] = (state, payload) => {
  return {
    ...state,
    actors: payload,
  }
};
// Usage
const newState = dictionary[action.type](state, action.payload); // Warning: This will break if the action.type is not found

رویکرد تابعی جاوا اسکریپت

مثال دیکشنری را با ایجاد تابع baseReducer که یک initialState به عنوان آرگومان نخست و یک دیکشنری به عنوان آرگومان دوم دریافت می‌کند، بهبود می‌بخشیم. خوشبختانه خواندن و درک کد زیر آسان است، چون از ثابت نوع اکشن به عنوان نام تابع استفاده می‌کنیم.

export const initialState = {
  currentShowId: '74',
  show: null,
  episodes: [],
  actors: [],
};

export const showsReducer = baseReducer(initialState, {
  [ShowsAction.REQUEST_SHOW_FINISHED](state, action) {
    return {
      ...state,
      show: action.payload,
    };
  },

  [ShowsAction.REQUEST_EPISODES_FINISHED](state, action) {
    return {
      ...state,
      episodes: action.payload,
    };
  },

  [ShowsAction.REQUEST_CAST_FINISHED](state, action) {
    return {
      ...state,
      actors: action.payload,
    };
  },
});

export default function baseReducer(initialState, reducerDictionary) {
  // returns a redux reducing function
  return (state = initialState, action) => {
    // if the action type is used for a reducer name then this be a reference to it.
    const reducer = reducerDictionary[action.type];

    // if the action type "reducer" const is undefined or the action is an error
    // return the state.
    if (!reducer || action.error) {
      return state;
    }

    // if there is a valid reducer call it with the state and action objects.
    return reducer(state, action);
  };
}

در کد فوق پارامتر reducerDictionary دیکشنری است که ارسال کرده‌ایم. توجه کنید که چگونه از action.type در اینجا استفاده کرده‌ایم. reducer[action.type] برای دریافت تابع Reducer صحیح استفاده می‌شود.

رویکرد کلاس جاوا اسکریپت

در ادامه مثال دیکشنری را با ایجاد کلاس BaseReducer برای بسط Reducer-های کلاس خود بهبود می‌بخشیم. در کد زیر به شیوه بسط BaseReducer از سوی ShowsReducer توجه کنید. این وراثت است و بخشی از منطقی کلاس دیگر را تجرید می‌کند به طوری که Reducer-ها تنها بخش مورد نیاز خود را به دست می‌آورند.

export default class ShowsReducer extends BaseReducer {
  initialState = {
    currentShowId: '74',
    show: null,
    episodes: [],
    actors: [],
  };

  [ShowsAction.REQUEST_SHOW_FINISHED](state, action) {
    return {
      ...state,
      show: action.payload,
    }
  }

  [ShowsAction.REQUEST_EPISODES_FINISHED](state, action) {
    return {
      ...state,
      episodes: action.payload,
    }
  }

  [ShowsAction.REQUEST_CAST_FINISHED](state, action) {
    return {
      ...state,
      actors: action.payload,
    }
  }
}

export default class BaseReducer {
  initialState = {};

  reducer = (state = this.initialState, action) => {
    const method = this[action.type];

    if (!method || action.error) {
      return state;
    }

    return method.call(this, state, action);
  };
}

اگر به BaseReducer فوق نگاه کنید موارد زیر را می‌بینید:

• در خط 2 initialState وجود دارد که وقتی کلاس Reducer این BaseReducer را بسط دهد، باطل می‌شود.
• در خط 4 متد Reducer وجود دارد که از سوی ریداکس استفاده خواهد شد.
• در خط 5 به متد کلاسی که با action.type تطبیق می‌یابد دسترسی پیدا می‌کنیم.
• در خط 7 اگر متد پیدا نشود یا اگر اکشن به صورت خطا باشد، state کنونی بازگشت می‌یابد.
• خط 11 متد پیدا شده را با آرگومان‌های state و action فراخوانی کرده و state تغییر یافته را که ریداکس مورد استفاده قرار خواهد داد بازگشت می‌دهد.

بدین ترتیب به پایان این مقاله با موضوع بررسی روش‌های بهبود Reducer-های ریداکس می‌رسیم.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش JavaScript ES6 (جاوا اسکریپت)
• آموزش جاوا اسکریپت — مجموعه مقالات جامع وبلاگ فرادرس
• راهنمای مقدماتی ریداکس (Redux) — به زبان ساده

==