Adding more than one store to repo causes errors when actions are pushed

[djmccormick]

This is probably another PEBKAC error, but I'm having trouble in my app as soon as I add a second store to the repo with Microcosm v10.0.0-beta3:

Results:

bundle.js:1596 Uncaught Error: When dispatching the list1 action's open state to the twos store, we encountered an "undefined" attribute within register(). This usually happens when an action is imported from the wrong namespace, or by referencing an invalid action state.

When I comment unused addStore calls, the problem clears up.

Code:

import Microcosm from 'microcosm';
import axios from 'axios';

/******************************************************************
 * Actions
 * ***************************************************************/

function list1 () {
    return axios.get('https://jsonplaceholder.typicode.com/posts');
}

function list2 () {
    return axios.get('https://jsonplaceholder.typicode.com/posts');
}

function list3 () {
    return axios.get('https://jsonplaceholder.typicode.com/posts');
}


/******************************************************************
 * Stores
 * ***************************************************************/

const Store1 = {
    getInitialState() {
        return '0';
    },

    register() {
        return {
            [list1.open]: this.list1Loading,
            [list1.done]: this.list1Completed,
            [list1.failed]: this.list1Failed,
            [list1.cancelled]: this.list1Cancelled
        };
    },

    list1Loading(state) {
        console.log(`list1Loading received ${state} and state is actually ${app.state.widgets}.`);

        return 'a';
    },

    list1Cancelled(state) {
        console.log(`list1Cancelled received ${state} and state is actually ${app.state.widgets}.`);

        return 'b';
    },

    list1Completed(state) {
        console.log(`list1Completed received ${state} and state is actually ${app.state.widgets}.`);

        return 'c';
    },

    list1Failed(state) {
        console.log(`list1Failed received ${state} and state is actually ${app.state.widgets}.`);

        return 'd';
    }
};

const Store2 = {
    getInitialState() {
        return '0';
    },

    register() {
        return {
            [list2.open]: this.list2Loading,
            [list2.done]: this.list2Completed,
            [list2.failed]: this.list2Failed,
            [list2.cancelled]: this.list2Cancelled
        };
    },

    list2Loading(state) {
        console.log(`list2Loading received ${state} and state is actually ${app.state.widgets}.`);

        return 'a';
    },

    list2Cancelled(state) {
        console.log(`list2Cancelled received ${state} and state is actually ${app.state.widgets}.`);

        return 'b';
    },

    list2Completed(state) {
        console.log(`list2Completed received ${state} and state is actually ${app.state.widgets}.`);

        return 'c';
    },

    list2Failed(state) {
        console.log(`list2Failed received ${state} and state is actually ${app.state.widgets}.`);

        return 'd';
    }
};

const Store3 = {
    getInitialState() {
        return '0';
    },

    register() {
        return {
            [list3.open]: this.list3Loading,
            [list3.done]: this.list3Completed,
            [list3.failed]: this.list3Failed,
            [list3.cancelled]: this.list3Cancelled
        };
    },

    list3Loading(state) {
        console.log(`list3Loading received ${state} and state is actually ${app.state.widgets}.`);

        return 'a';
    },

    list3Cancelled(state) {
        console.log(`list3Cancelled received ${state} and state is actually ${app.state.widgets}.`);

        return 'b';
    },

    list3Completed(state) {
        console.log(`list3Completed received ${state} and state is actually ${app.state.widgets}.`);

        return 'c';
    },

    list3Failed(state) {
        console.log(`list3Failed received ${state} and state is actually ${app.state.widgets}.`);

        return 'd';
    }
};

/******************************************************************
 * Bootstrapping
 * ***************************************************************/

class App extends Microcosm {
    constructor() {
        super();

        this.addStore('ones', Store1);
        this.addStore('twos', Store2);
        this.addStore('threes', Store3);
    }
}

const app = new App();


/******************************************************************
 * Bootstrapping
 * ***************************************************************/

app.push(list1);
setTimeout(() => {
    app.push(list2);

    setTimeout(() => {
        app.push(list3);
    }, 1000);
}, 1000);

[nhunzaker]

Oh I bet I know what's happening... We probably need to get rid of this error. The trouble is that list2 hasn't been dispatched, so it never gets tagged. I added this error to catch cases where actions weren't wired up properly.

Also, this probably shouldn't be an error -- just a warning. I'll patch this up.

[nhunzaker]

Also worth noting, that this is an unexpected side-affect of adding action.state to register methods. Prior to 10.x we didn't have action states (open, loading, etc..). Sort of a bummer to see this go. I wonder if we can intuit this some other way (maybe a Proxy?)