Sur Internet, une guerre sainte se déroule depuis longtemps entre les adeptes de la programmation fonctionnelle et OOP, Redux et MobX, React et Angular. Pendant de nombreuses années, je l'ai évitée, mais maintenant ce sujet m'a touché.

Maintenant que Redux est utilisé dans des centaines de milliers de projets, la communauté devient progressivement moins flexible. Si vous venez dans une entreprise où, par exemple, React est activement utilisé, alors très probablement, Redux vient généralement dans le kit. Beaucoup de haine s'est accumulée pour cette bibliothèque, mais utiliser autre chose est déjà plus difficile pour de nombreuses raisons. Pourquoi Redux est si mauvais et pourquoi il est encore pire sans qu'il soit bien exprimé dans de nombreux articles, mais en règle générale, les auteurs sont émotionnellement obligés d'utiliser quelque chose qu'ils aiment eux-mêmes davantage. La traduction la plus objective est peut-être " Improving Redux ". Mais je veux surtout souligner une citation:

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: Je ne prétends pas être une bibliothèque révolutionnaire, je suis parti du code lui-même, ce qui me semble le plus pratique. Ceci est mon expérience personnelle et les pensées que je veux partager. Toute critique est acceptée, restez en contact.