在Internet上，功能编程和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
• , ,

PS：我并不假装自己是一个突破性的库，而是从代码本身开始的，这对我来说似乎最方便。这是我的个人实验，也是我想分享的想法。任何批评都可以接受，只要保持联系即可。