alt

alt copied to clipboard

Hello,

I am experiencing an issue where my store is getting reset back to its default state (as defined in the constructor) when firing an initial action on the client. The store is using the ImmutableUtil decorator, and upon inspecting the initial bootstrapped data from the server, everything is fine. However, when I dispatch an action on the client, the state is reset. It's worth mentioning that I am not even attempting yet to change the store's state using this.setState().

Component method firing the action:

onSearchInputChange(evt) {
  require('debug')('dev')('onSearchInputChange', this.context.flux.stores.numberAllocations.state.toString());

  this.context.flux.getActions('numberAllocations')
    .updateFilter({ key: 'dialledNumber', value: evt.target.value });
}

The store:

import Immutable from 'immutable';

import immutableStore from 'alt/utils/ImmutableUtil';
import _trimLeft from 'lodash/string/trimLeft';

@immutableStore
export default class NumberAllocationsStore {
  constructor() {
    this.bindActions(this.alt.getActions('numberAllocations'));

    this.state = new Immutable.Map({
      data: new Immutable.List([]),
      meta: new Immutable.Map({}),
      filters: new Immutable.Map({
        dialledNumber: ''
      }),
      dataCurrentAllocation: new Immutable.Map({})
    });
  }

  onRetrieveAllocations({ data, meta }) {
    this.setState(this.state.merge({ data, meta }));
  }

  onRetrieveAllocation(data) {
    this.setState(this.state.set('dataCurrentAllocation', data));
  }

  onUpdateFilter({ key, value }) {
    require('debug')('dev')('onUpdateFilter', key, value, this.state.toString());
  }

}

To demonstrate this - the console output in onSearchInputChange (ran just before dispatching the action) is fine, while the console output for onUpdateFilter returns the unwanted reset store state:

I'm really quite stuck with this one. :confused: Alt version is 0.17.8. Any help would be greatly appreciated!

Turns out it was actually to do with referencing this.state within the store when mutating. It seems that for some reason this.state wasn't representing the bootstrapped data - so subsequent client-side mutations were actually just mutating the 'default' object.

Seems I have to do the following to keep this.state synced with the bootstrapped data:

this.on('bootstrap', (state) => {
  this.state = state;
});

hmmm the util should automatically handle that for you? :(

Doesn't seem to be! Could I be doing something weird that's preventing this from being handled automatically?

I had same issue with immutablejs. I fixed now by adding bootstrap listener, now stores should be set with bootstrap data.

export function initListeners(Store) {

  /* This excutes bootstrapping data */
  Store.on('bootstrap', function (value) {
    Store.setState(value);
  });

  /* This is for Logging */
  Store.on('beforeEach', function (value) {
    "use strict";

    const { payload, state } = value;
    if (Array.isArray(Store.actionListeners[payload.type])) {
      console.group(Store.displayName);
      console.log('Before :\t', state.toJS());
      console.log('payload :\t', payload.payload);
    }
  });
  Store.on('afterEach', function (value) {
    "use strict";

    const { payload, state } = value;
    if (Array.isArray(Store.actionListeners[payload.type])) {
      console.log('After :\t', state.toJS());
      console.groupEnd(Store.displayName);
    }
  });
}

and in UserStore

function UserStore() {
  this.displayName = 'UserStore';

  this.bindActions(UserActions);
  this.state = Immutable.Map({});

  initListeners(this);
}