使用Mobx来简化React项目中的状态管理

前言
最近打算在真实项目中推行一下mobx，所以打算整理一下自己的思想。
于是就有了下面这篇文章。

基于面向对象，使用更直观的方式来管理React的状态(state)。

下面会使用一个简单的例子来说明。

这是存储数据的一个模型

class ActivityList {
  // state为实例变量，可参考ruby，java
 // 活动列表的数据存在data数组里，分页信息在meta里
  state = {
    meta: {},
    data:[]
 }

  // 请求后端Api的方法
  fetchActivities() {
    const response = cfetch('/activities')
    // 在这里我们已经获取了Api返回的数据
  }
}

通过fetchActivities，我们已经拿到服务器返回的数据了。现在我们该怎么去把数据存储到react中，并引起view的更新呢？

1. 如果上面这个类是一个ReactComponent，那么我们可以这样去更新数据。

   fetchActivities() {
     const response = cfetch('/activities')
     this.setState({ state: response.jsonResult })
   

}
```
不过在react组件里，state只能传给子组件，不利于复用。
而且组件被拆除的话数据也会消失。

2. 通过redux的话我们可以把数据存到一个可共用的store中，便于复用和管理。

   // 因为redux是基于函数式的，所以不能使用上面的面向对象模型。
   // 这里简单的说明一下redux
   
   // 我们先定义一个reducer
   const state = {
     meta: {},
     data:[]
   }
   
   function activityList(state = state, action) {
       //.....
       return newState
   }
   // reducer是一个纯函数，它会传入当前的state，然后你把一个新的state返回给它，
   // 它就会去更新数据和view
   

虽然reducer是一个函数，但我们并不能直接去使用它，它由redux自身来调用，我们只能通过指派的形式去触发reducer。

// 之后我们需要建立一个action，通过dispatch来触发reducer
function fetchActivities() {
  const response = cfetch('/activities')
  store.dispatch({
    payload: response
  })
}

3. 通过1，2的方法我们了解到在react项目中更新state是怎么做的。现在我们回到主题

   使用更直观的方式来管理React的状态

   而最直观的方法莫过于这样

    fetchActivities() {
      const response = cfetch('/activities')
      this.state = response.jsonResult
   

}

看起来是不是有点不可思议，因为这种做法只是改变了变量的值，但在react中我们不仅要改变state，而且还需要让它更新到view。只是赋值的话是不可能引起view的变化的。
但是es5，就有一种特性可以延伸赋值行为的功能

Object.defineProperty(this, 'state', {
get() {
return this._state
},
set(state) {
this._state = state
// 在这里更新view
}
})
//这样子的话在this.state = response.jsonResult 时候所发生的再不只是单纯赋值

4. 现在我们看看怎么使用Mobx去管理状态

import { observable } from ''mobx"
import { observer } from "mobx-react"
// 还是这个类
class ActivityList {
// state为实例变量，可参考ruby，java
// 活动列表的数据存在data数组里，分页信息在meta里
// observable是一个装饰器，可以参考python，java的语法。
// 这个装饰器把state添加get和set访问器属性
@observable state = {
meta: {},
data:[]
}

 fetchActivities() {
   const response = cfetch('/activities')
   this.state = response.jsonResult
 }

}
const activityList = new ActivityList()

// 这是一个react组件
@observer
class ActivitiesPage extends Component {
componentDidMount () {
activityList.fetchActivities()
}

 render () {
   <ul>
     {activityList.state.data.map(v => <li>{v.id}</li>)}
   </ul>
 }

}

##### 通过这两个装饰器，我们就可以很简单去管理react的数据。
##### 想知道更多的关于mobx的概念，可点击 https://suprise.gitbooks.io/mobx-cn/content/intro/overview.html