Simple, scalable state management for React Component
State Management Solution for React component
import $ from 'jquery';
import store from '../store/index';
@action getSearchResults () {
$.ajax({
method: 'GET',
url: store.getSearchApiUrl
}).done((response) => {
store.setSearchResult(response.data.results);
});
}
@observable classProperty = value
@observable search = (searchText) ? searchText : '';
@observable order = 'desc';
@observable total = 0;
@observable searchResults = [];
@observable isReloadResult = false;
@observer
class Results extends Component {
constructor(props) {
super(props);
loadSearchResults();
}
...........
}
@computed get getSearchApiUrl() {
var URL = this.SEARCH_API_URL + 'order=' + this.order, params;
params = (this.search) ? '&q=' + this.search : '';
params = (this.type) ? params + '&type=' + this.type : params;
params = (this.selectedTag) ? params + '&tag=' + this.selectedTag : params;
URL = URL + params;
return (this.searchResults.length && !this.isReloadResult)
? URL + "&page=" + this.nextPage : URL ;
}
$.ajax({
method: 'GET',
url: store.getSearchApiUrl
})
var numbers = observable([1,2,3]);
var sum = computed(() => numbers.reduce((a, b) => a + b, 0));
var disposer = autorun(() => console.log(sum.get()));
// prints '6'
numbers.push(4);
// prints '10'
Example Code: https://github.com/emran/react-mobx-phonebook
A
n
y
Q
u
e
s
t
i
o
n
P1, Bashundhara Group