Redux در عمل (راه اندازی اولیه)

Redux Initial Setup

در قسمت قبل با redux به صورت تئوری آشنا شدیم اما حالا وقت آن است که به صورت عملی با آن کار کنیم. برای انجام این کار یک پروژه برایتان قرار می دهم که باید آن را دانلود کنید، سپس از حالت فشرده خارج کرده و در پوشه اصلی آن دستور npm install را اجرا کنید:

دانلود سورس کد پروژه

پس از نصب می توانید npm rum را اجرا کنید تا پروژه در مرورگرتان باز شود:

برنامه ی بسیار ساده برای تست redux — برنامه بسیار ساده برای تست redux

این پروژه یک پروژه بسیار ساده است که در بالای صفحه یک شمارنده دارد. زیر این شمارنده چند دکمه متفاوت موجود است که مانند تصویر بالا از چپ به راست به ترتیب به شمارنده 1 واحد اضافه، 1 واحد کم، 5 واحد اضافه و 5 واحد کم می کنند. اگر بخواهید می توانید وارد پوشه container آن شده و state را ببینید:

  state = {
    counter: 0
  }

در حال حاضر در این پروژه از redux استفاده نشده است تا با هم این کار را انجام بدهیم. دستور زیر را در ترمینال خود وارد کنید:

npm install --save redux

همانطور که گفتم پکیج redux کاملا مستقل از react است بنابراین ابتدا از آن به صورت مستقل استفاده می کنیم و سپس در آینده آن را به همراه react به کار می بریم. پس از اجرای دستور بالا و نصب redux در کنار فایل package.json یک فایل دیگر به نام redux-basics.js ایجاد کنید. ما درون این فایل هیچ کد react ای را نخواهیم نوشت بلکه با استفاده از جاوا اسکریپت ساده برخی مفاهیم redux را مرور خواهیم کرد.

ما می خواهیم تمام عناصر مورد نیاز برای استفاده از redux را درون فایل redux-basics.js تعریف کنیم: Store و reducer و action و subscription. برای استفاده از store باید چیزی را از پکیج redux وارد فایل کنیم و از آنجایی که در react نیستیم دیگر نمی توانیم از دستور import استفاده کنیم. من می خواهم این فایل را با node اجرا کنم بنابراین باید از روش node برای وارد کردن فایل ها استفاده کنم:

const redux = require('redux');

یک ثابت به نام redux را ساخته ایم و خود redux را با دستور require وارد فایلمان کرده ایم. در مرحله بعد یک ثابت می سازیم که به دستور CreateStore در redux اشاره دارد:

const redux = require('redux');
const createStore = redux.createStore;

createStore یک تابع است اما من نمی خواهم فعلا اجرا شود به همین خاطر جلوی آن پرانتز نگذاشته ام. من می خواهم آن را در یک ثابت دیگر قرار دهم:

const redux = require('redux');
const createStore = redux.createStore;

// Store
const store = createStore();

اما این دستور کار خاصی انجام نمی دهد چرا که Store ما (نقطه مرکزی redux برای ذخیره state) باید یک reducer را به عنوان پارامتر دریافت کنید چرا که reducer تنها عنصری است که state را به روز رسانی کرده و به Store متصل است. به همین خاطر قبل از کامنت store یک کامنت دیگر ایجاد می کنم و reducer خودم را در آن قسمت می نویسم:

// Reducer
const rootReducer = () => {

};

// Store
const store = createStore();

همانطور که می بینید reducer ما تنها یک تابع ساده است. البته این تابع دو آرگومان مختلف می گیرد:

State فعلی یا به عبارتی state برنامه قبل از به روز رسانی آن.
Action

سپس این تابع، state به روز رسانی شده را برمی گرداند. ساده ترین reducer ای که می توانید بنویسید به شکل زیر است:

// Reducer
const rootReducer = (state, action) => {
  return state;
};

بله، این reducer همان state قدیمی را برمی گرداند و ساده ترین نوع reducer است. من از همین reducer ساده استفاده می کنم و آن را به createStore می دهم:

// Reducer
const rootReducer = (state, action) => {
  return state;
};

// Store
const store = createStore(rootReducer);

حالا store جدید ما ساخته شده است اما state آن به صورت undefined است. برای تست این مسئله می توانیم مقدار State را console.log کنیم:

// Store
const store = createStore(rootReducer);
console.log(store.getState());

تابع getState از توابع خود redux است که state برنامه را به ما تحویل می دهد. حالا می خواهم این فایل را با node اجرا کنم. برای این کار ابتدا ترمینال خود را باز کرده و وارد پوشه این فایل شوید. سه راه برای این کار وجود دارد:

وارد پوشه فایل redux-basics.js شده و کلید Shift را نگه داشته و در یک قسمت خالی صفحه راست کلیک کنید. سپس از منوی باز شده گزینه open command prompt here را انتخاب کنید.
Command prompt خود را در هر جایی باز کرده و با استفاده از دستور cd آن را به پوشه مورد نظر هدایت کنید.
فایل redux-basics.js را در VSCode باز کرده و از منوی view و سپس terminal ترمینال خود VSCode را باز نمایید.

پس از انتخاب یکی از این سه روش، دستور زیر را در ترمینال تایپ کنید:

node redux-basics.js

با اجرای این دستور باید مقدار console.log را درون همان ترمینال مشاهده کنید. با اجرای آن باید مقدار undefined برایتان نمایش داده شود. چرا مقدار state تعریف نشده است؟ به دلیل اینکه ما اصلا state ای درون این فایل تعریف نکرده ایم بنابراین می گوییم:

const redux = require('redux');
const createStore = redux.createStore;

const initialState = {
  counter: 0
}

initial state قرار است حالت اولیه state من باشد. من از یکی از ویژگی های ES6 جاوا اسکریپت استفاده می کنم تا برای پارامترهای یک تابع مقدار اولیه تعیین کنم:

const redux = require('redux');
const createStore = redux.createStore;

const initialState = {
  counter: 0
}

// Reducer
const rootReducer = (state = initialState, action) => {
  return state;
};

// Store
const store = createStore(rootReducer);
console.log(store.getState());

در واقع با اضافه کردن علامت مساوی گفته ایم که اگر state تعریف نشده بود، شیء initialState را به عنوان مقدار پیش فرض دریافت کن. با اجرای دستور node redux-basics.js خروجی زیر برایمان نمایش داده می شود:

{ counter: 0 }

این نحوه ساخت یک Store بسیار ساده به همراه reducer و راه اندازی اولیه state بود. در قسمت بعد از subscription ها استفاده خواهیم کرد و با Action ها نیز به صورت عملی آشنا خواهیم شد.