react+mobx:如何组织store之最佳实践
上篇文章 create-react-app + webpack + antd + less + mobx 的demo入门配置 简单介绍了一个笔者使用的最基本的react配置,简单引入了mobx。 现在问题是 如果store越来越多,会导致引用混乱,非常不便于开发。因此在阅读了几篇文章之后,我尝试给出一个相对较好的使用方法。 参考文章; 保有对子store的引用
provider,inject引入react
官方文档
统一管理 Store
针对越来越多的store
, 可以考虑使用 一个总 Store,保持对每个子 Store的引用。如有必要,可以在子Store中传入父Store,让子Store也可以访问到父Store。
import CountStore from './CountStore'
import ChangeNameStore from './ChangeNameStore'
class Store {constructor() {this.countStore = new CountStore()this.changeNameStore = new ChangeNameStore()}
}
export default new Store()
复制代码
实践一
如上,简单创建的两个子Store。在需要使用数据的地方,import store
即可, 看下面例子:
const ChangeName = (observer( ( {} ) => {return (<div className='Change'><div>{store.changeNameStore.name}</div><div className="buttons"><Button type="primary" className="btn" onClick={() =>store.changeNameStore.changeName()}>change</Button></div></div>);
}))
export default ChangeName;
复制代码
ChangeNameStore
如下:
import {observable, action} from 'mobx'class ChangeNameStore {@observable name = "sun"@actionchangeName() {if (this.name === "sun") {this.name = "wen"} else {this.name = "sun"}}
}export default ChangeNameStore;
复制代码
运行程序,点击按钮可以看到name改变。
这种方式引用方便,哪里用到store就哪里import。弊端就是如果store的层级越来越多,会导致代码难以编写。
实践二
官方参考redux,给出了Provider和inject组件,推荐使用DI方式去管理store,这也是我觉得最好的方式。 首先也是由一个stores保持有对所有子store的引用,接着使用Provider组件将stores传递给父组件。
import CountStore from './mobx/CountStore'
import ChangeNameStore from './mobx/ChangeNameStore'const countStore = new CountStore();
const changeNameStore = new ChangeNameStore();const stores = {countStore,changeNameStore,
}class App extends Component {render() {return (<Provider {...stores}><Home/></Provider>);}
}export default App;
复制代码
如上,下面是怎么使用inject
是自组件可以访问store。
const ChangeName = inject("changeNameStore")(observer( ( {changeNameStore} ) => {return (<div className='Change'><div>{changeNameStore.name}</div><div className="buttons"><Button type="primary" className="btn" onClick={() =>changeNameStore.changeName()}>change</Button></div></div>);
}))export default ChangeName;
复制代码
推荐使用无状态组件,将需要的store直接传入组件,其他使用方法与之前无区别。 如此以来,无论store的层级有多少,针对单一功能组件原则, 可以将最小的store引入,方便管理。
最佳实践的代码见,保持不断更新。
github:github.com/yunshuipiao…
react+mobx:如何组织store之最佳实践相关推荐
- python组件的react实现_React-Router动态路由设计最佳实践
写在前面 随着单页应用(SPA)概念的日趋火热,React框架在设计和实践中同样也围绕着SPA的概念来打造自己的技术栈体系,其中路由模块便是非常重要的一个组成部分.它承载着应用功能分区,复杂模块组织, ...
- Google SRE最佳实践之On-Call
本系列文章将详细介绍如何从0到1快速构建SRE团队具体实战内容,敬请关注. 上期文章<一文彻底读懂DevOps与SRE来龙去脉> "On-call"言下之意就是&quo ...
- 使用Typescript和React的最佳实践
by Christopher Diggins 克里斯托弗·迪金斯(Christopher Diggins) 使用Typescript和React的最佳实践 (Best practices for us ...
- 基于 react, redux 最佳实践构建的 2048
前段时间 React license 的问题闹的沸沸扬扬,搞得 React 社区人心惶惶,好在最终 React 团队听取了社区意见把 license 换成了 MIT.不管 React license ...
- React.js 2016 最佳实践 徬梓阅读 1584收藏 71
为什么80%的码农都做不了架构师?>>> 译者按:近几个月React相关话题依旧火热,相信越来越多的开发者在尝试这样一项技术,我们团队也在PC和移动端不断总结经验.2016来了 ...
- React最佳实践系列 —— Dva快速入门
Dva最佳实践 -- 快速入门 一. 门槛 React 技术栈 二. Hello World 三. 一个简单H5 1. 安装 antd ui组件库 2. 在开始之前,先了解dva的目录结构. 3. 关 ...
- 你不知道的 React 最佳实践
React ⚛️ React 是一个用于开发用户界面的 JavaScript 库, 是由 Facebook 在 2013 年创建的. React 集成了许多令人兴奋的组件.库和框架[1]. 当然,开发 ...
- React最佳实践系列 —— 循序渐进理解 Dva中的model概念
Dva最佳实践 -- 循序渐进理解 Dva中的model概念 一. 序 二. 在create-react-app中使用redux 1. 开始 2. 安装redux 三.异步action 四. Dva中 ...
- react 设计模式与最佳实践
本文是阅读米凯莱·贝尔托利 <React设计模式与最佳实践> 一书的读书笔记,支持作者请点这里购买. Take is cheap, just show me the code. 废话不少说 ...
最新文章
- 希尔伯特曲线 java_Java中空间填充Hilbert曲线的递推算法
- 【泛型】Generic 参数化类型 类型转换
- FineReport实现java报表统计图表的效果图
- [密码学基础][每个信息安全博士生应该知道的52件事][Bristol Cryptography][第20篇]Merkle-Damgaard hash函数如何构造
- C#复数类Complex的封装
- java 时间的相关转换操作
- Python大数据系列-01-关系数据库基本运算
- angular-cli环境搭建过程中常遇到的npm install问题
- C、C++ 不得宠,微软正开发新的编程语言!
- Java中常用的正则表达式判断,如IP地址、电话号码、邮箱等
- 我用python自制hosts修改神器,组长说你他娘的还真是个天才(附源码)
- 简单实用的web打印方案-网页精准打印
- centos6 yum源失效解决方法
- ADPCM 编码 及WAV解析 及实例
- 拜仁超越自我终成夙愿-记2013欧冠决赛
- eclipse相关介绍
- org.eclipse.wst.common.component
- CSS中min-height、min-width、max-width、max-height的理解及优先级问题
- 乌云漏洞库与OWASP TOP 10
- word2010排版技巧
热门文章
- 蓝桥杯第八届省赛JAVA真题----分巧克力
- 蓝桥杯第八届省赛JAVA真题----方格分割
- 图论算法(三)--最短路径 的Bellman-Flod [ 带负权值图 ] 的解法(JAVA )
- VO,BO,PO,DO,DTO的区别
- dos命令测试网络连通情况
- js中当等于最小值是让代码不执行_从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理...
- simulink 解析udp数据_DNS 支持 TCP 和 UDP 双协议,但为何偏偏只钟情 UDP?
- 有关java的名句_关于志气的名言名句(精选50句)
- java this() super()_java中的this和super
- 深度优化LNMP之Nginx [1]