Skip to content
This repository has been archived by the owner before Nov 9, 2022. It is now read-only.

thewei/react-native-immutable

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code
This branch is 6 commits ahead, 133 commits behind hufeng:master.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 

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: ''
}

About

**[DEPRECATED]** using immutable.js library as store with react && react-native

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%