इंटरनेट पर, कार्यात्मक प्रोग्रामिंग और OOP, Redux और MobX, React और Angular के अनुयायियों के बीच एक पवित्र युद्ध लंबे समय से जारी है। कई सालों तक मैंने उससे परहेज किया, लेकिन अब इस विषय ने मुझे छू लिया है।

अब Redux का उपयोग सैकड़ों हजारों परियोजनाओं में किया जाता है, समुदाय धीरे-धीरे कम लचीला होता जा रहा है। यदि आप एक कंपनी में आते हैं, उदाहरण के लिए, रिएक्ट सक्रिय रूप से उपयोग किया जाता है, तो सबसे अधिक संभावना है, Redux आमतौर पर किट में आता है। इस लाइब्रेरी के लिए काफी नफरत जमा हो गई है, लेकिन कुछ और का उपयोग करना कई कारणों से पहले से ही अधिक कठिन है। क्यों Redux इतना बुरा है और क्यों यह और भी बदतर है क्योंकि यह कई लेखों में अच्छी तरह से व्यक्त किया गया है, लेकिन एक नियम के रूप में, लेखकों को भावनात्मक रूप से कुछ का उपयोग करने के लिए मजबूर किया जाता है जो वे खुद को अधिक पसंद करते हैं। शायद सबसे अधिक उद्देश्यपूर्ण लिखित अनुवाद " सुधार करने वाला Redux " है। लेकिन मैं विशेष रूप से एक उद्धरण को उजागर करना चाहता हूं:

Redux, , . , Redux, , , « , jQuery».

, .

: .

React , , . , , , MobX, , ...

… ?

, ( 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
• , ,

पुनश्च: मैं एक सफल पुस्तकालय होने का दिखावा नहीं करता, मैंने कोड से ही शुरुआत की, जो मुझे सबसे सुविधाजनक लगता है। यह मेरा व्यक्तिगत प्रयोग है और जिन विचारों को मैं साझा करना चाहता हूं। किसी भी आलोचना को स्वीकार किया जाता है, बस संपर्क बनाए रखें।