Store2.default.performSearch is not a function, using source
I'm trying to create a simple Alt flux example, using store, action, view and Source. However, I'm having a problem moving the data from source to store as in Alt Flux Handling Async. What I got when I try to access the store new function "performSearch" is
OrganizationStore2.default.performSearch is not a function.
In the following code, I'm trying to access the performSearch function in App.jsx, as it is a function of OrganizationStore.js once I used registerAsync(Source).
source.js
import OrganizationActions from '../actions/OrganizationActions'
import axios from 'axios'
const Source = {
performSearch: {
remote(state) {
return axios.get('localhost:8000/file.json');
},
local(state) {
return state.results[state.value] ? state.results : null;
},
loading: OrganizationActions.deleteManager, // (optional)
success: OrganizationActions.deleteManager, // (required)
error: OrganizationActions.deleteManager, // (required)
shouldFetch(state) {
return true
}
}
};
OrganizationStore.js
import alt from '../alt'
import OrganizationActions from '../actions/OrganizationActions'
import Source from '../source/Source'
class OrganizationStore {
constructor(){
this.bindListeners({
handleDeleteManager: OrganizationActions.deleteManager,
handleUpdateManager: OrganizationActions.updateManager,
handleFetchAll: OrganizationActions.fetchAll
});
this.state = {
manager: "Anim pariatur cliche ",
};
this.registerAsync(Source);
}
handleUpdateManager(data){
this.setState({manager: data});
}
handleDeleteManager(){
this.setState({manager: "deleted"});
}
handleFetchAll() {
this.setState({manager:null})
}
}
export default alt.createStore(OrganizationStore, 'OrganizationStore');
OrganizationActions.js
import alt from '../alt'
class OrganizationActions{
fetchAll(){
return{};
}
updateManager(manager){
return manager;
}
deleteManager(){
return{};
}
}
export default alt.createActions(OrganizationActions);
App.jsx
class App extends React.Component{
static getStores() {
return [OrganizationStore];
}
static getPropsFromStores() {
return OrganizationStore.getState();
}
componentDidMount(){
OrganizationStore.performSearch();
}
render(){
return(
...
);
}
}
passing anything else than a Promise from local causes this issue. And even if you pass a Promise it never resolves.
Workaround to this is something like
remote(state) {
if(state.categories) {
return Promise.resolve(state.categories);
}
return WebService.request("/categories.json", WebMethods.GET);
}