来自：原创内容，盗版必究。react-developer-road【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netmap

我就想写个网页，何必这么残忍？面对这个画原创内容，盗版必究。【作者：唐霜】面，我都有贴大哥表情包的冲动。但是我忍住【作者：唐霜】本文作者：唐霜，转载请注明出处。，毕竟我还是想写代码来丰富我的人生的。

在 react 的生态中，我们不难发现非转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】常优秀的项目。例如，跨组件的通信怎么办？本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。来 redux 吧！redux 组织好复【未经授权禁止转载】原创内容，盗版必究。杂？上 redux-saga 吧！异步咋【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。解决呢？来 redux-thunk 真香【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】！使用特定 state 也挺麻烦？搞 r【本文受版权保护】【原创内容，转载请注明出处】eselect 如何！哎呀呀，还是来 r著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ematch 或来套国产的 dva 也行【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】……

你让我写个应用，我除了要花精力去解决打包原创内容，盗版必究。【原创不易，请尊重版权】编译工具的问题之外，还要来纠结到底要用哪转载请注明出处：www.tangshuang.net【转载请注明来源】个方案。真的很烦唉！其实，就像当年用 j【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】query 用爽了，扛起 backbon原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。e 或更狠上 angular 就开干。我【未经授权禁止转载】【原创内容，转载请注明出处】写了这么多年 react，想要的是一套框【版权所有，侵权必究】【转载请注明来源】架，拿过来就开撸的那种。

从 roadmap 中，我们看这个区域，【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net也就是 react 生态的状态管理和表单本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。数据管理这个部分。是不是复杂！很复杂！那【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】是因为 MobX 还没有扩展开来聊。害得【原创内容，转载请注明出处】【未经授权禁止转载】我又想贴表包……

我们能不能简化 react 应用中的状态原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。管理？能不能把数据请求这块处理的更加优雅【本文首发于唐霜的博客】【原创内容，转载请注明出处】？能不能提供更靠谱的 form 模型？有【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。的。

Nautil 框架来了！！！【原创内容，转载请注明出处】

本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。

一款基于 react 的 js 前端框架【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。。在我看来，一个前端框架需要具备应用开发【未经授权禁止转载】【原创内容，转载请注明出处】中必不可少的部件。而且要好用，方便开发者【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。理解和写代码。Nautil 一次性提供体本文版权归作者所有，未经授权不得转载。【作者：唐霜】验超爽，而且还有趣的：

• UI 渲染【转载请注明来源】
【转载请注明来源】【本文首发于唐霜的博客】【版权所有，侵权必究】
• 路由【作者：唐霜】
【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】
• 状态管理【本文受版权保护】
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net
• 数据仓库【未经授权禁止转载】
【本文首发于唐霜的博客】【转载请注明来源】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【转载请注明来源】
• 数据类型检查本文版权归作者所有，未经授权不得转载。
【未经授权禁止转载】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】
• 跨端开发解决方案【作者：唐霜】
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】
• 多语言国际化【转载请注明来源】
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】

让我们来举个例子，就拿复杂的 state著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】 管理来开刀吧。想想你在以往经验里面使用本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。 redux 是怎么用的，有没有在准备方【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】案阶段就很纠结和心累？如果你用 Naut未经授权，禁止复制转载。【原创内容，转载请注明出处】il，不需要纠结，因为你没得选，只有一种【未经授权禁止转载】转载请注明出处：www.tangshuang.net全局的状态管理方案。

import { Component, Store, ObservableProvider } from 'nautil'
import { Section, Text } from 'nautil/components'

// create a store
const store = new Store({
   name: 'tomy',
   age: 10,
})

class App extends Component {
  render() {
    return (
      <ObservableProvider
        name="$store" value={store}
        subscribe={dispatch => store.watch('*', dispatch)} dispatch={this.update}
      >
        <Page1></Page1>
      </ObservableProvider>
    )
  }
}

class Page1 extends Component {
  static injectProviders = {
    $store: true,
  }
  render() {
    const { state } = this.$store
    return <Section>
      <Text>Hi, I am {state.name}, and I am {state.age} years old.</Text>
    </Section>
  }
}复制代码

啥？你没看到怎么管理状态的？不怪你，因为本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。它实在实在是太方便了，因为在 Nauti原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】l 里面，你可以没有全局的状态管理，但是【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】你一定会有某个数据是全局的（准确的说是跨【未经授权禁止转载】【原创不易，请尊重版权】组件），你只需要用 Observable【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。Provider 这个组件去提供就可以了转载请注明出处：www.tangshuang.net原创内容，盗版必究。。然后在很深的组件里面去使用 injec【版权所有，侵权必究】转载请注明出处：www.tangshuang.nettProviders 来注入这个被提供的【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net数据。恰巧的是，Nautil 提供的 S【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。tore 是一个可被观察的数据容器，使用未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】 store.watch 来监听它的数据【作者：唐霜】【原创内容，转载请注明出处】的变化，并在变化的时候触发更新操作。

还没明白？原创内容，盗版必究。

这里的 store 就是你的状态管理器了【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net啊！！！store 里面存着整个应用被共【未经授权禁止转载】【转载请注明来源】享的 state，你可以在任何地方去，任【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】何地方改，任何地方删，都会通过 stor【本文受版权保护】【原创不易，请尊重版权】e.watch 的部分触发应用更新。也许【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net你没听明白我的意思。我的意思是，你甚至可【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】以在 react 应用之外去修改数据都是著作权归作者所有，禁止商业用途转载。【作者：唐霜】可以的，只要你在任何地方执行一下：

store.state.age ++复制代码

你的界面就会发生变化。是的，即使把你的 【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】nautil 应用和 angular 应【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。用混在一起，共享一个 store，也是可【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】以的。同时，你还可以通过 watch 来【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】收集每一次数据的变化，在必要时，把收集起【版权所有，侵权必究】未经授权，禁止复制转载。来的数据通过 store.update 转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】来复原数据。

它是不是完全超出了你对 react 状态原创内容，盗版必究。原创内容，盗版必究。管理的理解？没关系，还有一个东西会超出你【本文首发于唐霜的博客】【版权所有，侵权必究】的理解，那就是从后台 api 拉取数据。

你有没有想过，为什么那么优秀的 redu本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。x 会变得那么臃肿？因为数据是前端应用的转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。命啊，一个不需要从后台 api 取数据的未经授权，禁止复制转载。【作者：唐霜】前端应用，除非是工具或游戏，否则就是没有【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】灵魂的应用啊！所以，redux 出来之后转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。，包括 react 本身，都必须面临异步转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】数据请求的问题。以 react 本身而言转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。，它一开始完全没有机制去处理，一个数据必著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】然存在两种状态：数据还没有从后台拉回来的【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】状态，已经拉回来的状态。在数据没有拉回来转载请注明出处：www.tangshuang.net【版权所有，侵权必究】的时候，把界面显示出来，等数据回来了，再【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。闪一下，哦豁，用户都可以化身产品经理给开未经授权，禁止复制转载。【未经授权禁止转载】发提 bug 了。

Nautil 怎么解决？本文作者：唐霜，转载请注明出处。

import { Component, ObservableProvider, Depository, Prepare } from 'nautil'
import { Text } from 'nautil/components'

// set data sources information
const datasources = [
  {
    id: 'articles',
    url: '/api/articles',
  },
  {
    id: 'tag',
    url: '/api/tags/{tag}',
  },
]

// create a data depository
const depo = new Depository({
   expire: 10000,
})

// register data sources into depository
depo.register(datasources)

class App extends Component {
  render() {
    return (
      <ObservableProvider
        name="$depo" value={depo}
        subscribe={dispatch => depo.subscribe('articles', dispatch).subscribe('tag', dispatch)}
        dispatch={this.update}
      >
        <Page1></Page1>
      </ObservableProvider>
    )
  }
}

class Page1 extends Component {
  static injectProviders = {
    $depo: true,
  }

  render() {
    const depo = this.$depo
    const some = depo.get('tag', { tag: 'some name' })

    return (
      <Prepare isReady={some} loadingComponent={<Text>loading...</Text>}>
        <Text>{some.name}</Text>
      </Prepare>
    )
  }
}复制代码

创建一个数据仓库来管理从后台 api 接本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net口拉取的数据。在业务代码和后台 api 【未经授权禁止转载】【未经授权禁止转载】之间，不要直接打交道，而是通过数据仓库整本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】合。业务代码，只需要从仓库中 get 数【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】据即可，这个 get 是同步操作，不需要【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】等待。同时，仓库是可观察的，通过一个 s【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。ubscribe 方法对仓库进行观察，如本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。果发现对应的数据发生变化，那么立即更新界【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】面。对于仓库中还没有对应的数据时，使用 原创内容，盗版必究。【转载请注明来源】Prepare 组件来提供一个 load【版权所有，侵权必究】未经授权，禁止复制转载。ing 效果。

听上去好像还挺顺的对不对？但是，等等！！【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】！我什么时候发 ajax 去请求数据？

你真的不需要关心 ajax 的问题，真的著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】！你只要 get, get, get～ 【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】我能理解你理解不了，只是现在。只要你用用转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】，什么 thunk, saga, act【转载请注明来源】转载请注明出处：www.tangshuang.netion, dispatch 统统一边去耍【关注微信公众号：wwwtangshuangnet】【本文受版权保护】吧。不需要异步的好吗。

话说回来，即使有异步操作，我们还有 st【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】ore，随时随地，时时刻刻，想改就改，毫【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】无限制。

如果你再去了解一下 Nautil 的路由【原创不易，请尊重版权】【原创内容，转载请注明出处】，你会发现一个规律：

Nautil 就是 react，naut本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netil 不只是 react。

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【转载请注明来源】

说的这么玄乎，意思是，它完全兼容 rea【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】ct 应用。比如你在其他地方写了一些纯 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。UI 的 react 组件，没关系，拿过转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】来直接用。或者你想在其他的 react 转载请注明出处：www.tangshuang.net原创内容，盗版必究。应用中使用 nautil 编写的组件，没【本文受版权保护】著作权归作者所有，禁止商业用途转载。关系，直接拿去用。

你会发现，nautil 中强调“可观察的著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】”这样一个概念。简单说就是有一个办法知道【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】发生了变化。nautil 内置的 Obs本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】erver 组件用于监听这些变化，并且在原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。变化发生时执行传入的逻辑（一般是更新界面【转载请注明来源】本文版权归作者所有，未经授权不得转载。）。所以，在 nautil 中，数据、状转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】态、路由都是“可观察的”对象，被注入到应转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】用中。但本质上，它们是完全独立的，意思是原创内容，盗版必究。未经授权，禁止复制转载。，你可以在 react 应用之外的任何场转载请注明出处：www.tangshuang.net【未经授权禁止转载】景使用这些“可观察的”对象，也可以将整个【转载请注明来源】【版权所有】唐霜 www.tangshuang.net体系之外的“可观察的”对象拿到 naut【本文首发于唐霜的博客】未经授权，禁止复制转载。il 中直接使用。这也可以说是“渐进式”著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net，可用可不用，当然，作为框架，你必须这样转载请注明出处：www.tangshuang.net【本文受版权保护】用才符合我写 nautil 的初衷。

不开源的都是耍流氓。【版权所有，侵权必究】

转载请注明出处：www.tangshuang.net【本文受版权保护】【转载请注明来源】本文作者：唐霜，转载请注明出处。

很遗憾，Nautil 到现在还没有发布。【转载请注明来源】本文作者：唐霜，转载请注明出处。但你可以通过 github 关注或贡献代【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】码。你也可以从 github 克隆下来跑【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。跑看，也许会喜欢上呢～

github本文作者：唐霜，转载请注明出处。

最后补充一句。Nautil 还提供了内置【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。的 Model，拥有结构化、数据校验、格【本文首发于唐霜的博客】未经授权，禁止复制转载。式化、类型检查、可观察等特性，在表单开发【本文受版权保护】【本文首发于唐霜的博客】时可能是你正在寻找的最好的解决方案，之一【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】。