Mobx 基本入门

  • June 06, 2017 09:30
  • Posted by jamie
  • 0 comments

Mobx, 一个简单、可扩展的状态管理插件, 可结合React, 小程序使用。

这篇文章主要讲一下mobx的基本使用,并且结合React设计一个简单的store。

下面简单介绍一下在react中使用mobx需要掌握的两个简单的概念。

  1. Observable state(可观察的状态)

    Mobx可以让现有的js数据结构(数组,对象)添加可观察功能。 这个功能主要是指,能对数据的各种操作进行监听(例如数组的元素的变化,对象的属性的值的更改。),从而实现现下前端所流行的响应式编程。

  2. Observer (观察者)

    mobx-react这个库,提供一个叫observer的功能。它能使react组件变成观察者模式。

    在观察者模式下,它具有监测Observable state的功能。 当Observable state发生变化时,观察者会收到信息,然后响应这个变化作出事先定义好的行为。

    以react来说,它在收到Observable state发生变化的信息时,它会重新调用render方法,把数据更新到视图上。

下面举一个简单的例子

class Counter extends Component {
  count = 0

  render() {
    return (
      <div>
        Counter: {this.count}
        <Button onClick={this.handleAdd}>+</Button>
        <Button onClick={this.handleDec}>-</Button>
      </div>
    )
  }

  handleAdd = () => {
    this.count++
  }

  handleDec = () => {
    this.count--
  }
}

这是一个简单的计数器的例子。通过实例变量count保存数字,通过handleAdd和handleDec这两个方法可以改变count的值。然后在react组件的render函数里把count这个变量映射到视图上。

咋看一下好像没什么问题,但其实有使用react经验的都知道,在react里更新视图需要state属性和setState方法来配合才有意义。即使是redux这个库,也不过是在组件最顶层管理state,然后把state分发到各个组件来使用。

但是mobx能使上面的这种结构变为可能。

@observer
class Counter extends Component {
  @observable count = 0

  render() {
    return (
      <div>
        Counter: {this.count}
        <Button onClick={this.handleAdd}>+</Button>
        <Button onClick={this.handleDec}>-</Button>
      </div>
    )
  }

  handleAdd = () => {
    this.count++
  }

  handleDec = () => {
    this.count--
  }
}

observable这个方法会让count变成可观察的state。而observer这个方法会使react组件变成观察者。当count发生变化时,身为观察者的react组件会对应这个变化而重新调用render方法来更新视图。

PS

Observable state 和 Observer 是互相独立的。 可观察状态不一定是观察者自身的属性。Observable state可以独立于组件外,单独存在于一个对象里。

创建一个给React组件使用的store

下面会以还原真实情景为目标,设计一个存储后台api数据的store。

  1. 为了数据更真实,以下提供一个真实的api地址。

    CNode社区api目录,这是node中文社区网站对外开放的一个api目录。CNode的数据主要以帖子为主。以下会选择主题详情这个api来做讲解

    这是这个api返回的数据的基本结构

     {
       "success": true,
       "data": {
         "id": "5433d5e4e737cbe96dcef312",
         "author_id": "504c28a2e2b845157708cb61",
         "tab": "share",
         "title": "一个面向 Node.js 初学者的系列课程:node-lessons",
         "last_reply_at": "2016-06-16T08:12:21.234Z",
         "good": true,
         "top": false,
         "reply_count": 85,
         "visit_count": 28422,
         "create_at": "2014-10-07T12:00:36.270Z",
         "is_collect": false,
         "author": {
           "loginname": "alsotang",
           "avatar_url": "https://avatars2.githubusercontent.com/u/1147375?v=3&s=120"
         },
         "replies": []
       }
    }
    
  2. 现在开始设计存储主题详情的store。

    为了让数据结构更清晰,会采用class的形式来构造。 api返回的数据会以一个实例变量(state)来接受。 并且state会被构造为Observable state

    class TopicStore {
      @observable state = { 
        isFetching: false,
        isRejected: false,
        isFulfilled: false,
        success: false,
        data: {
          // "id": "5433d5e4e737cbe96dcef312",
          // "author_id": "504c28a2e2b845157708cb61",
          // "tab": "share",
          // "title": "一个面向 Node.js 初学者的系列课程:node-lessons",
          // ........
        }
      }
    }
    

    从上面的例子可以看到,state除了保存了api的返回结果以外,还具有3个bool属性来表示状态。

    • isFetching 用于存储api请求的状态。
    • isRejected 用于表示错误状态。
    • isFulfilled 用于表达数据充满后的状态。

    定义了存储数据的结构后,还需要一个获取数据的方法。

    class TopicStore {
      @observable state = { 
        isFetching: false,
        isRejected: false,
        isFulfilled: false,
        success: false,
        data: {
          // "id": "5433d5e4e737cbe96dcef312",
          // "author_id": "504c28a2e2b845157708cb61",
          // "tab": "share",
          // "title": "一个面向 Node.js 初学者的系列课程:node-lessons",
          // ........
        }
      }
    
      // 这是一个请求主题详情的方法
      fetchTopic(id) {
        // 在api请求前,先需要保存请求的状态(把状态置为请求中)
        this.state.isFetching = true
    
        // 然后发请求
        fetch(...)
          .then(res => {
             // 在这里处理成功后的状态。
             // 假设res就是api返回的数据,数据格式参考上面。
             // 把返回的数据合并到state上
             Object.assign(this.state, res)
    
             // 然后还需要把状态置为请求成功。
             this.state.isFetching = false
             this.state.isFulfilled = true
    
             //上面可以简写成
             Object.assign(this.state, res, {
               isFetching: false,
               isFulfilled: true
             })
          })
          .catch(
            // 错误处理。这里不做介绍。
          )
      }
    }
    

    最后创建store的实例,以供react组件使用。

    export const topicStore = new TopicStore()
    
  3. 最后需要创建一个react组件来展示主题详情的数据。

    import { topicStore } // 导入store实例
    
    @observer //observer让组件变成观察者模式
    export default class TopicPage extends Component {
     componentDidMount() {
       // 在组件的生命周期内获取数据。
       topicStore.fetch()    
     }
    
     render() {
       // 在render里使用store里的数据。
       const { id, title, tab, ...data } = topicStore.state.data
    
       renturn ...
     }
    }
    

至此,一个简单的Store就构造完成了。

Comments

Post your comment