نحوه اجرای کانتینر حالت ساده از خراش

بیایید تصور کنیم که یک جز component ، یک شمارنده ساده داریم. شمارنده دارای یک حالت و دو دکمه برای دستکاری در این حالت است. ما همچنین عملکردی برای ارائه دولت داریم.

و در اینجا ما دو مشکل داریم:

• لایه نمایش و لایه داده مخلوط می شوند. بنابراین ، اگر بخواهید یکی از آنها را تغییر دهید ، هر دو را لمس خواهید کرد. این یک نقض SRP است.
• پشتیبانی و حفظ منطق بین م componentsلفه هایی که حالت محلی دارند دشوار است. مشکل مقیاس پذیری بوجود می آید.

برای حل این مشکلات ما از روش FLUX استفاده خواهیم کرد که اساساً به معنای آن است “داده ها پایین است، اقدام به بالا “. با کلیک بر روی هر دکمه عمل آغاز می شود. بنابراین ما یک اقدام داریم و اکنون باید وضعیت برنامه خود را تغییر دهیم. اما چگونه تصور می کنیم این کار را انجام دهیم؟

Redux در مورد برنامه نویسی کاربردی است ، بنابراین ما از توابع خالص و تغییرناپذیری استفاده خواهیم کرد. توابع ، وضعیت ما را تغییر می دهند ، ما آن را کاهش دهنده می نامیم این حالت و عملکرد فعلی را به عنوان یک استدلال دریافت کرده و به حالت جدید باز خواهد گشت. عملکرد به صورت زیر خواهد بود:

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

اکنون باید فروشگاه خود را ایجاد کنیم. بیایید عملکرد جدید را درست کرده و آنرا فراخوانی کنیم

createStore

.

function createStore(reducer) {