首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于如何在 Mobx 中组织 Stores

关于如何在 Mobx 中组织 Stores

原创
作者头像
发声的沉默者
修改2021-06-16 10:04:52
8310
修改2021-06-16 10:04:52
举报
文章被收录于专栏:江歌闲谈江歌闲谈

Stores(存储)

Store 可以在任何 Flux 系架构中找到,可以与 MVC 模式中的控制器进行比较。 Store 的主要职责是将逻辑和状态从组件中移至一个独立的,可测试的单元,这个单元在 JavaScript 前端和后端中都可以使用。

单一 Stores

RootStore

import { observable, action, configure } from 'mobx';



// configure({ enforceActions: 'always' });



class RootStore {



    @observable

    name = '123';



    @action('name')

    updateCount() {

        this.name = '456';

    }

}

export default new RootStore();

Stores 注入

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'mobx-react';

import RootStore from './mobx/rootStore';



ReactDOM.render(

    <Provider rootStore={RootStore}>

        ...

    </Provider>,

    document.getElementById('root')

);

页面引入

import React, { Component } from 'react';

import { observer, inject } from 'mobx-react';



@inject('rootStore')

@observe

class Index extends Component {

    constructor(props) {

        super(props);

    }



    render() {

        return (

            <>

            </>

        );

    }

}



export default Index;

优点:

  • 好理解,容易入手,经典的 MVC 模式。

缺点:

  • 如果 Store 越来越大,那么非常不好维护。

单一 Stores 进阶版

RootStore

import { observable, action } from 'mobx';

import { configure } from 'mobx';



configure({ enforceActions: 'always' });



class RootStore {



    @observable

    test = '123';



    @action('test')

    updateCount() {

        this.test = '456';

    }

}

export default new RootStore();

页面 Store

import { observable, action } from 'mobx';



class DashBoardStore extends BasicStore {

    @observable

    name = 'Faker';



    @action

    updateName() {

        this.name = 'Jiang';

    }

}



export default DashBoardStore;

注入 RootStore

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'mobx-react';

import RootStore from './mobx/rootStore';



ReactDOM.render(

    <Provider rootStore={RootStore}>

        ...

    </Provider>,

    document.getElementById('root')

);

页面引入

import React, { Component } from 'react';

import { observer, inject } from 'mobx-react';

import DashboardStore from '../../mobx/Dashboard/store';



@inject('rootStore')

@observe

class Index extends Component {

    constructor(props) {

        super(props);

        this.dashboardStore = new DashboardStore();

    }



    componentDidMount() {

        this.dashboardStore.updateName();

    }



    render() {

        return (

            <>

            </>

        );

    }

}



export default Index;

优点:

  • 每个页面对应一个 StoreStore 不会非常庞大
  • 各个 Store 相对独立
  • 不同页面需要共享的数据存入 RootStore
  • 在进入页面,会对 Store 初始化

缺点:

  • 组件侵入性,需要改变 React 组件原本的结构,例如所有需要响应数据变动的组件都需要使用 observer 装饰,组件本地状态也需要 observable 装饰,以及数据操作方式等等,对 Mobx 耦合较深,日后切换框架或重构的成本很高
  • 状态可以被随意修改,通过configure({ enforceActions: 'always' });杜绝在 Action 以外对 Store 的修改

多 Store 组合

RootStore

import UserStore from './User/store';

import StatisticalCenterStore from './StatisticalCenter/store';

import AccountSettingStore from './AccountSetting/store';

import CallRecordStore from './CallRecord/store';

class RootStore {

    constructor() {

        this.userStore = new UserStore();

        this.statisticalCenterStore = new StatisticalCenterStore();

        this.accountSettingStore = new AccountSettingStore();

        this.callRecordStore = new CallRecordStore();

    }

}

export default new RootStore();

Stores 注入

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'mobx-react';

import RootStore from './mobx/rootStore';



ReactDOM.render(

    <Provider {...RootStore}>

        ...

    </Provider>,

    document.getElementById('root')

);

页面引入

import React from 'react';

import { inject, observer } from 'mobx-react';



@inject('userStore')

@inject('statisticalCenterStore')

@observe

class Index extends React.PureComponent {

    constructor(props) {

        super(props);

        this.state = { };

    }



    render() {

        return (

            <>

            </>

        );

    }

}



export default Index;

优点:

  • 每个页面对应一个 StoreStore 不会非常庞大
  • 各个 Store 相对独立
  • 那个页面需要那个 Store,引入即可
  • 不刷新游览器,页面状态一直保持着

缺点:

  • 组件侵入性,需要改变 React 组件原本的结构,例如所有需要响应数据变动的组件都需要使用 observer 装饰,组件本地状态也需要 observable 装饰,以及数据操作方式等等,对 Mobx 耦合较深, 日后切换框架或重构的成本很高
  • 无数据快照,如果要重置 Store,那么得写reset action,一个个变量还原,当然也可以通过 mobx-state-tree 实现

中性:

状态可以被随意修改:

  • 直接在视图层给状态赋值,比如我有 A,B 两个页面,都要修改 C 页面,那么,我在 A 和 B 页面修改 C 的 Store,很方便,但是,如果不制定一套规范,如果数据改变,要追踪来源,很困难,而且很容易产生意想不到的情况。
  • 通过configure({ enforceActions: 'always' });杜绝在 Action 以外对 Store 的修改

博客

欢迎关注我的博客

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Stores(存储)
  • 单一 Stores
  • 单一 Stores 进阶版
  • 多 Store 组合
  • 博客
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档