Telah ada perang suci di Internet antara penganut Pemrograman Fungsional dan OOP, Redux dan MobX, React dan Angular. Selama bertahun-tahun saya menghindarinya, tetapi sekarang topik ini telah menyentuh saya.

Sekarang Redux digunakan dalam ratusan ribu proyek, masyarakat secara bertahap menjadi kurang fleksibel. Jika Anda datang ke perusahaan di mana, misalnya, Bereaksi aktif digunakan, maka kemungkinan besar, Redux biasanya datang ke dalamnya dalam kit. Cukup banyak kebencian yang menumpuk di perpustakaan ini, tetapi menggunakan sesuatu yang lain sudah lebih sulit karena banyak alasan. Mengapa Redux begitu buruk dan mengapa lebih buruk tanpa itu diungkapkan dengan baik dalam banyak artikel, tetapi sebagai aturan, penulis secara emosional dipaksa untuk menggunakan sesuatu yang mereka sukai. Mungkin terjemahan yang paling objektif ditulis adalah " Improving Redux ." Tapi saya terutama ingin menyoroti satu kutipan:

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

PS: Saya tidak berpura-pura menjadi pustaka terobosan, saya mulai dari kodenya sendiri, yang menurut saya paling nyaman. Ini adalah eksperimen pribadi saya dan pemikiran yang ingin saya bagikan. Setiap kritik diterima, tetap berhubungan.