goatslacker / alt

Isomorphic flux implementation
http://alt.js.org/
3.45k stars 322 forks source link

Store2.default.performSearch is not a function, using source #667

Open OmarMuhtaseb opened 8 years ago

OmarMuhtaseb commented 8 years ago

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(
      ...
    );
 }
}
hhunaid commented 7 years ago

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);
    }