Search code examples
javascriptreactjsflux

altjs react store connection not working


I'm trying to connect my stores to the actual app in order to provide data and react to state changes. Sadly though, the store connection seems to be faulty.

 @connectToStores
 class App extends Component {

     static getStores() {
        return [CategoryStore, UserStore, LocalizationStore];
     }

     static getPropsFromStores() {
         return {
            ...CategoryStore.getState(),
            ...UserStore.getState(),
            ...LocalizationStore.getState()
     };
   }

    static componentDidConnect(props, context) {
         ca.fetchCategories();
         la.fetchLocales();
     }

The componentDidConnect never gets used when running the project. According to this: https://github.com/altjs/connect-to-stores/issues/6 that function should run as soon as the stores have been connected. I had it working partially putting the action in componentWillMount, but the states aren't updated properly. So I think the store connect isn't set up properly.

I also tried both the ES7 decorator / ES6 normal implementation.

I have no clue why data from the stores isn't properly distributed. any help is more than welcome!


Solution

  • I figured it out. The reason why the props weren't passed down to the childeren due to the following:

    I used this to initialize the children:

     const children = React.Children.map(this.props.children, (child) => {
      return React.cloneElement(child, this.state);
     });
    

    Which passes down the state but not the props. hence replacing this.state with this.props worked for me.