Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thewei/react-native-immutable
**[DEPRECATED]** using immutable.js library as store with react && react-native
https://github.com/thewei/react-native-immutable
Last synced: about 2 months ago
JSON representation
**[DEPRECATED]** using immutable.js library as store with react && react-native
- Host: GitHub
- URL: https://github.com/thewei/react-native-immutable
- Owner: thewei
- License: mit
- Archived: true
- Fork: true (hufeng/iflux)
- Created: 2015-03-17T15:36:52.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-01-22T03:11:08.000Z (about 9 years ago)
- Last Synced: 2024-11-10T05:25:26.407Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 27.3 KB
- Stars: 13
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-immutable ★12 - using immutable.js library with react-native (Components / Utils & Infra)
- awesome-react-native - react-native-immutable ★12 - using immutable.js library with react-native (Components / Utils & Infra)
- awesome-react-native - react-native-immutable ★12 - using immutable.js library with react-native (Components / Utils & Infra)
- awesome-react-native - react-native-immutable ★12 - using immutable.js library with react-native (Components / Utils & Infra)
- awesome-react-native-ui - react-native-immutable ★11 - using immutable.js library with react-native (Components / Utils & Infra)
README
# react-native-immutable
**using immutable.js library as store with react && react-native**
More info of [immutable.js](http://facebook.github.io/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
```javascript
'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 (
Change user name
)
}
});
AppRegistry.registerComponent('DEMO', () => App);
```
### mainAction.js
```javascript
'use strict';
var {Action} = require('react-native-immutable');
// require userAction
require('./userAction')();
// require articleAction
require('./articleAction')();
module.exports = Action;
```
### userAction.js
```javascript
'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
```javascript
'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
```javascript
'use strict'
module.exports = {
name: ''
}
```