Shimo Offline Store

SOS - 石墨离线解决方案。

安装

$ npm install shimo-sos

使用

SOS 针对 Redux，提供了 Action, Store, Middleware, Resolver 来实现离线数据操作。

Action

Action 分成两部分，乐观和非乐观。 所有乐观 Action 均支持离线； 非乐观 Action 均返回 Promise 以表示操作结果。

乐观 Action 会直接修改对应的 state，并由 Resolver 在适当的时候与服务器同步：

import { updateUsername } from 'shimo-sos'

class Profile extends Component {
  onChangeUsername(e) {
    const name = e.target.value
    dispatch(updateUsername(this.props.me.id, { name }))
  }

  render() {
    return <p>用户名：<span>{this.props.me.name}</span></p>
  }
}

非乐观 Action 均会返回 Promise 用来跟踪异步结果， 这些 Action 有些会直接请求网络，有些会先请求本地存储然后再请求网络，如果所有途径均失败则会报错。

import { getRecentFileList } from 'shimo-sos'

class RecentFile extends Component {
  componentDidMount() {
    this.showLoadingIndicator()
    dispatch(getRecentFileList()).then((recentFiles) => {
      // 结果既会通过回调返回，也会直接更新到 state 中，
      // 所以这里可以不处理返回结果，只用来处理载入动画提示
      this.hideLoadingIndicator()
    }).catch((error) => {
      this.handleError(error)
    })
  }

  renderFile(file) {
    return <li key={file.id}>{file.name}</li>
  }

  render() {
    return <ul className="recent-files">
        {
          this.props.recentFiles.map(renderFile)
        }
      </ul>
  }
}

Store

SOS 提供了 Store 的 state 结构和一系列 Reducer 来操作该 state。

import { combineReducers } from 'redux'
import { modelReducer } from 'shimo-sos'

const reducer = combineReducers({
  ...modelReducer
})

Middleware

SOS 提供 createThunkReplyMiddleware 中间件来支持 Action 中自定义的 Thunk + Promise 的组合。 同时 enhancer modelPersistence 用来实现自动持久化。如果不需要持久化（如网页版）则不引入 modelPersistence

import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
import { createThunkReplyMiddleware, modelPersistence } from 'shimo-sos'

import createStorage from 'shimo-sos-localstorage'
// 或者 React Native 使用 AsyncStorage:
// import createStorage from 'shimo-sos-asyncstorage'

const storage = createStorage('prefix.model')

const store = createStore(
  reducer,
  compose(
    modelPersistence,
    applyMiddleware(createThunkReplyMiddleware({
      storage,
      api: {
        prefix: 'https://api.shimo.im/',
        id: 'client id',
        secret: 'client secret'
      }
    }))
  )
)