react-native+mobx实现持久化状态存储

我们使用mobx都知道，它只是一个状态管理工具，并不能持久化存储数据，这篇文章我将分享如何利用mobx实现持久化存储。

那么我们就从搭建mobx开始：

• 创建应用：
  react-native init MobxDemo --version 0.55.3
• 引入mobx：
  cd MobxDemo
npm i mobx mobx-react --save
• 安装babel插件 以支持ES7 decorator属性：
  npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 --save-dev
• 创建.babelrc文件配置babel插件：

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy"]
}

mobx配置完毕，开始码代码：

• 新建src/store/index.js和src/store/user.js文件：

user.js

import {AsyncStorage} from 'react-native'
import {observable, computed, action} from 'mobx'

/** 存储登录信息*/
class User {
    @observable userbean: any = null;//对象

    USER_BEAN_STORAGE = 'USER_BEAN';//保存对象
    /**
     * 保存对象的action
     * @param bean
     */
    @action setUserBean = bean => {
        this.userbean = bean;
        AsyncStorage.setItem(this.USER_BEAN_STORAGE, JSON.stringify(bean))
    };
  /**
   *创建构造函数
   */
    constructor() {
        this._userBeanStorage();//查询对象
    }

    /**
     * 从本地存储中查询对象
     * @returns {Promise<void>}
     * @private
     */
    async _userBeanStorage() {
        let value = await AsyncStorage.getItem(this.USER_BEAN_STORAGE);
        this.userbean = value ? JSON.parse(value) : value;
    }
}
export default new User()

index.js

import user from './user'
/** 导出mobx状态*/
export default {
    user,
}

• 在根目录App.js中引入mobx，将mobx状态设置为全局：

App.js

import React, {Component} from 'react';
import {
    StyleSheet,
    View
} from 'react-native';
import {Provider} from 'mobx-react/native'
import store from './src/store'
import Main from "./src";

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Provider {...store}>
                    <Main/>
                </Provider>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
});

• 创建App主文件src/index.js

index.js

import React, {Component} from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {inject, observer} from "mobx-react/native";

const userBean = {
    id: 123,
    name: 'zs',
    age: 14,
};

@inject('user')
@observer
export default class Main extends Component<Props> {
    constructor(props) {
        super(props);
    }

    render() {
        const {user} = this.props;
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    onPress={() => {
                        user.setUserBean(userBean)
                    }}
                    style={styles.save}
                >
                    <Text>
                        保存登录信息
                    </Text>
                </TouchableOpacity>
                <Text style={styles.text}>
                    实时显示保存信息： {JSON.stringify(user.userbean)}
                </Text>
                <TouchableOpacity
                    onPress={() => {
                        user.setUserBean(null)
                    }}
                    style={styles.clear}
                >
                    <Text>
                        清除登录信息
                    </Text>
                </TouchableOpacity>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    save: {
        width: 100,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#10ffd6'
    },
    clear: {
        width: 100,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ff540b'
    },
    text: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

• 最终我们看一下手机上的效果：

  
  未添加存储.jpg

点击保存登录信息.jpg

我们在没有添加存储的情况下使用mobx cmmand+R刷新页面，状态会被初始化，但是添加AsyncStorage本地存储就实现了，数据和状态持久化存储。