على الإنترنت ، تم شن حرب مقدسة منذ فترة طويلة بين أتباع البرمجة الوظيفية و OOP و Redux و MobX و React و Angular. لقد تجنبتها لسنوات عديدة ، لكن هذا الموضوع قد أثر عليّ الآن.

يستخدم Redux الآن في مئات الآلاف من المشاريع ، ويصبح المجتمع أقل مرونة تدريجيًا. إذا أتيت إلى شركة حيث ، على سبيل المثال ، يتم استخدام React بنشاط ، فمن المرجح أن Redux يأتي إليها عادةً في المجموعة. تراكمت الكثير من الكراهية لهذه المكتبة ، ولكن استخدام شيء آخر أصعب بالفعل لأسباب عديدة. لماذا يعد Redux سيئًا للغاية ولماذا يكون أسوأ حتى بدون التعبير عنه جيدًا في العديد من المقالات ، ولكن كقاعدة عامة ، يضطر المؤلفون عاطفيًا لاستخدام شيء يعجبهم أكثر. ربما تكون الترجمة الأكثر موضوعية هي " تحسين Redux ". لكنني أرغب بشكل خاص في تسليط الضوء على اقتباس واحد:

Redux ، من حيث المبدأ ، مكتبة بسيطة وصغيرة ذات منحنى تعليمي حاد. لكل مطور يتقن ويستفيد من Redux ، منغمسًا في البرمجة الوظيفية ، هناك مطور محتمل آخر يشعر بالارتباك ويعتقد أن "هذا ليس من أجلي ، سأعود إلى jQuery".

وبالمناسبة ، أنا واحد من آخر.

الهدف من أي مكتبة هو جعل التعقيد بسيطًا بمساعدة التجريد.

في وقت كتابة هذا التقرير ، كنت أستخدم React لمدة لا تزيد عن شهر ، لذلك هناك مخاطر محتملة قد لا أعرفها ، وسوف تكتب إليّ عنها في التعليقات. ليس هذا هو سبب المقال ، إلى جانب ذلك ، هناك MobX ، الذي يتعلق فقط بـ OOP ، لذلك ...

لماذا

... اختراع دراجة جديدة؟

, ( Redux) — . , Redux.

, Vuex, , , . vuex @, , , . ,  . — , , , .

Store

, , , :

import {Store, state, Mutation, Action} from "@disorrder/storm";

export default class Account extends Store {
    @state amount = 0

    @Mutation setAmount(val = 0) {
        return {amount: val};
    }

    @Action async updateAmount() {
        let {data} = await api.get("/user/account");
        //  1
        this.setAmount(data);
        //  2
        this.amount = data;
        //  3
        this.mutate({amount: data}); // ,     .
        //  3      ,     .
    }
}

, , () Redux. vuex , .

Store state, . mutate(),   state, .

 @state ( ) state.

Mutation — , reducer Redux, state. , "" . Redux, - action , . Redux ,  action.type . Mutation  .

Action — . API, , action. , , , , .

vuex  action action, .   , , . , .

, React Vue. connect ( Redux).   !

// src/store/index.js
import User from "./User"
export const user = new User()
  . . .

// src/store/User.js
export default class User extends Store {
  // ...
}

// src/App.js
import user from "./store";

class App extends Component {
    componentDidMount() {
        user.subscribe((mutation, oldState) => {
            this.setState({});
        });
    }
}

. subscribe user, mutation , .

Collection pattern

, , . , . , . , , CRUD. . (, , )

export default class Collection extends Store {
    url = "/"
    pk = "id" // Primary key

    @state items = {}
    @state indices = [] // itemIds

    // -         .       .
    @Mutation __add(item) {
        const id = item[this.pk];
        this.items = {...this.items, [id]: item};
        this.indices = [...this.indices, id];
    }

    // - 
    @Mutation add(item) {
        const id = item[this.pk];
        const items = {...this.items, [id]: item};
        let mutation = {items};

        const rewrite = id in this.items;
        if (!rewrite) {
            mutation.indices = [...this.indices, id];
        }

        return mutation;
    }

    @Action async create(data) {
        let item = await api.post(this.url, data);
        this.add(item);
    }

    @Action async getById(id) {
        let item = await api.get(`${this.url}/${id}`);
        this.add(item);
    }

    @Action async getList(id, params) {
        let items = await api.get(this.url, {params});
        items.forEach(this.add.bind(this));
    }
}

, :

export default class Users extends Collection {
    url = "/users"
}

. . : , SOLID, DRY, KISS — , .

• 150 . , , . , "Redux , ". !
• . Redux reducers actions .
• switch-case

• , . Babel. createStore, .
• subscribe, watcher
• , ,

ملاحظة: أنا لا أتظاهر بأنني مكتبة مذهلة ، لقد بدأت من الكود نفسه ، والذي يبدو لي الأكثر ملاءمة. هذه تجربتي الشخصية والأفكار التي أريد مشاركتها. يتم قبول أي انتقاد ، فقط ابق على اتصال.