react-native-immutable

using immutable.js library as store with react && react-native

More info of immutable.js

Installation

npm install react-native-immutable --save

Useage

react-native project
   |---index.ios.js
   |---App
         |---Actions
         	   |--- mainAction.js
         	   |--- userAction.js
         	   |--- articleAction.js
         	   |--- ...
         |---Stores
         	   |--- mainStore.js
         	   |--- userStore.js
         	   |--- articleStore.js
         	   |--- ...
         |---Webapi
         

index.ios.js

'use strict';

var React = require('react-native');

var { mixins } = require('react-native-immutable');
var StoreMixin = mixins.StoreMixin;
var appStore = require('./App/Stores/mainStore');
var appAction = require('./App/Actions/mainAction');

var {
  AppRegistry,
  StyleSheet,
  View,
  Text
} = React;

var App = React.createClass({
    mixins: [StoreMixin(appStore,"user","article")],
    onChangeUserName: function(){
    	appAction.emit('onChangeUserName', "wilson");
    },
    render: function() {
        
        console.log(this.state);  // when store was changed, the state will change;
        
        console.log(this.state.username)
        
        return (
        	<View>
        		<Text onPress={this.onChangeUserName}>Change user name</Text>
        	</View>
        )   
    } 
});
    
    
AppRegistry.registerComponent('DEMO', () => App);

mainAction.js

'use strict';

var {Action} = require('react-native-immutable');

// require userAction
require('./userAction')();


// require articleAction
require('./articleAction')();

module.exports = Action;

userAction.js

'use strict';

var Immutable = require('immutable');
var {Action} = require('react-native-immutable');
var appStore = require('../Stores/mainStore');

// 更新管理员
var userAction = function(){
	Action.on('onChangeUserName', function(name) {
		// study immutable.js visit http://facebook.github.io/immutable-js/
    	appStore.getStore("user").set('name', name );
	});
}

module.exports = userAction;

mainStore.js

'use strict'

var Immutable = require('immutable');
var {Store,Action} = require('react-native-immutable');

var React = require('react-native');



var appStore = module.exports = Store({
    user: require('./userStore'),
    article: require('./articleStore)
});


// Use AsyncStorage if u what

var {
    AsyncStorage
} = React;

var db_name = "app_store";

Action.on("_updateStore", function(data){
    AsyncStorage.setItem(db_name, JSON.stringify(data), function(err) {
        if (err) {
            console.error("error")
        }
    });
});

//initial Data
AsyncStorage.getItem(db_name, function(err, res) {
    if (err) {
        console.error("error")
    } else {
        if( typeof res == undefined ){
            Action.emit("_updateStore",appStore.getData());
        }else{
            appStore = Immutable.fromJS(JSON.parse(res));
        }
    }
});

userStore.js

'use strict'

module.exports = {
    name: ''
}