luisvinicius167 / mockstate Goto Github PK

First of all thanks for the great library.

In RiotJS observables and also in RiotControl when triggering event you can specify unlimited arguments to trigger function and receive them on listener:

// On observable
self.trigger('event', 1, true, {test: 123});
// On listener
obs.on('event', function(num, status, obj){
  // All arguments are present
});

However in riotux only first argument is forwarded to listener and rest of them are dropped.

riotux.trigger('myStore', 'event', 1, 2, 3);
// On myStore:
self.on('event', function (one, two, three) {
  // two and three are undefined :(
});

It would be great if this library had same possibility and since it is built on top of observables I was expecting same behaviour.

I guess it could be easy change, using apply similarly as here:
https://github.com/jimsparkman/RiotControl/blob/master/riotcontrol.js#L15

Although I tried to fix by myself first, but didn't succeeded.

Thanks.

I am building an application using mockstate, and I noticed that quite often I get the same action to be triggered multiple times, although I am pretty sure i only dispatch it once.

Are there any other reports on this? Or does it make any sense even?

I am basically just using dispatch and subscribe. And for one dispatched action I get multiple entries in the subscribe (for the same data.action).

nice project, I've written something similar for react-templates, if you mind I would like to hear your opinion on the following ideas:

1. make actions be true functions on the store itself. So instead of calling the dispatcher with the magic string my_action, you call the function directly (store.my_action(params)). The advantage is to have full intellisense on the action parameters (assuming your IDE does support intellisense). Perhaps the store itself could be an ES6 class to exend.

2. make the store trigger just one update event when the state changes. The idea is to simplify: you don't want to deal with the details of what part of the state sub-tree has changed, it's enough to know something has changed. So your store could have a "subscribe" function:

store.subscribe(this); // this=riot tag
// on the store:
function subscribe(tag) {
   this.on('update', ()=> tag.update() );
}
function update() {
   this.trigger('update');
}
function my_action() {
   // mutate state
   this.update();
}

3. you can write a wide range of debugging tools by hooking on the actions and on the update event. For example writing to console what actions have been dispatched, the params, and the state differences before/after (look at packages like deep-diff).

Good work!

Is it possible to have multiple stores? Or only one store needs to have entire state of the app.

I have seen no example showing the ability to "time travel" like Redux.
'Mutations' Should be called 'Mutators' in my opinion.
riotux.get(state) is better than riotux.getter(state) in my opinion

You have a few typos in the docs. I could send you a pull request to correct them if you want.

I am witnessing some weird behaviour.
Two of my riot tags are performing riotux actions on mount event. In the same tags I am subscribed to two different state properties. Both actions perform asynchronous calls and when asynchronous task is complete I am dispatching events to change according properties. Both state mutations are called.
The problem is that only one subscribed handler is called.
If I uncomment one or another action, then each of them works well, but not when both running in parallel.

Working on new version of Riotux. Now, you can dispatch your actions and do something when the Store state was changed. Like this:

import {dispatch} from 'riotux'
dispatch('increment', 1).then( ( newState ) => {
  console.log(`The state was changed. Receive new data: ${newState.action} : ${newState.stateValue}`);
})

Inside your Action, you need return a Promise, and inside your promise you can do what you whant. Like this:

import {setActions} from 'riotux'

setActions({
  increment: (state, n) => {
    return new Promise((resolve, reject) => {
     // your async function
      setTimeout(() => {
        let result = state.count += n;
        resolve(result);
      }, 2000)
    });
  }
});

And you can set your Store state with setState. Your application state is just a simple Object.

import {setState} from 'riotux'

setState({
  count: 0
})

You can see the new work here: Branch new

I'm planning create a Riotux Dev Tools too. :)

Feedbaks are very welcome! Thanks!

Hello @luisvinicius167,
I am one of the member in cdnjs.
There are some problems that need to confirm.
The library riotux riotux in cdnjs seems to be the same as mockstate.
Therefore, would you want to add mockstate in cdnjs, or just integrate into riotux in cdnjs?
Thanks!

cdnjs/cdnjs#7770
cdnjs/cdnjs#9323
cdnjs/cdnjs#9964

From the docs:

var action = riotux.Actions({
  add: function ( store, number ) {
    store.dispatch('increment', number);
  }
}); 

Calling an action on your component

riotux.action('count', 'increment', 10);

Is there any reason why the instance of the action is assigned to the "action" variable when it is supposed to be called from the riotux instance?

I can't understand the reason of having state name as first argument when calling action.
Could you please explain little more, because right now I can do in actions whatever I want and set different properties in store and it still works no matter what i provided when calling action. Thank you.

var store = riotux.Store({
  state: {
    todos: [],
    something_else: null
  },
  mutations: {
    something_else: function ( state, value ) {
      state.something_else = value;
    }
  }
})

var actions = riotux.Actions({
  add_todo: function ( store, value ) {
    // Dispatching something else, not related to todos mutations at all.
    store.dispatch('something_else', value);
  }
})

riotux.action('todos', 'add_todo', 'Something');

While trying to unsubscribe a component I always get a

Uncaught (in promise) ReferenceError: el is not defined

right here:
unsubscribe: function unsubscribe(component) { var components = Mockstate._store.components; components.forEach**(el,** function (index) { if (el === component) { components.splice(index, 1); } }); },

Seems like bad syntax (el should be before index as a function parameter)

Is it anything you could fix also in npm?