En Internet, se ha librado durante mucho tiempo una guerra santa entre los partidarios de la Programación Funcional y OOP, Redux y MobX, React y Angular. Durante muchos años la evité, pero ahora este tema me ha tocado.

Ahora que Redux se usa en cientos de miles de proyectos, la comunidad se está volviendo gradualmente menos flexible. Si vienes a una empresa donde, por ejemplo, React se usa activamente, entonces lo más probable es que Redux generalmente lo haga en el kit. Se ha acumulado bastante odio por esta biblioteca, pero usar algo más ya es más difícil por muchas razones. Por qué Redux es tan malo y por qué es aún peor sin eso está bien expresado en muchos artículos, pero, por regla general, los autores se ven obligados emocionalmente a usar algo que a ellos mismos les gusta más. Quizás la traducción más objetivamente escrita es " Mejorar Redux ". Pero especialmente quiero destacar una cita:

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

PD: No pretendo ser una biblioteca innovadora, comencé desde el código en sí, lo que me parece más conveniente. Este es mi experimento personal y los pensamientos que quiero compartir. Cualquier crítica es aceptada, solo manténgase en contacto.