cam-inc/riotx

Centralized State Management for riot.js

riotx

Centralized State Management for riot.js

A Simplistic Central Event Controller / Dispatcher For RiotJS, Inspired By vuex Architecture Pattern. Riotx is a state management pattern + library for riot.js applications.

🔎 Official Website(📙 Documentation, Quick Start, Demo Site)

https://cam-inc.github.io/riotx/

Changelog

Detailed changes for each release are documented in the release notes.

Copyright

CA Mobile, Inc. All rights reserved.

LICENSE

MIT LICENSE LICENSE

riotx's Issues

✨ Expansion of Plugin hook

Insert hook function at all timing of start and completion below

• store.getter
  • this.trigger('riotx:getters:before', name, triggers, context, data);
  • this.trigger('riotx:getters:after', name, triggers, context, data);
• store.commit
  • this.trigger('riotx:mutations:beforer', name, triggers, context, data);
  • this.trigger('riotx:mutations:after', name, triggers, context, data); (supported!)
• store.action
  • this.trigger('riotx:actions:before', name, triggers, context, data);
  • this.trigger('riotx:actions:after', name, triggers, context, data);

English document creation

Add Github Template

`store.event` is not properly disconnected.

https://github.com/cam-inc/riotx/blob/develop/src/index.js#L175

Checking plugin, action, mutation and getter definition (function)

• Actions
• Mutations
• Getters
• Plugins

Unify the arguments to Getter, Action Mutation and Plugin.

Definition

Store

new Store({
    state: {
        text: 'Hello'
    },
    /**
     * - sayGetter/sayAppendSuffixGetter Getter name.
     * @param {Object} context Information provided by `riotx` to `Getter`.
     * - context.state Store.state object
     * @param {Object} data Data from this caller.
     */
    getters: {
        sayGetter: (context) => {
            return context.state.text;
        }      
        sayAppendSuffixGetter: (context, data) => {
            return `${context.state.text} ${data.text}`;
        }      
    },
    /**
     * - sayAction Action name.
     * @param {Object} context Information provided by `riotx` to `Action`.
     * - context.getter Store.getter shortcut
     * - context.commit Data to carry to Mutation. 
     * @param {Object} data Data from this caller.
     */
    actions: {
        sayAction: (context, data) => {
            const text = 'World';
            context.commit('sayMutation', {text: data.text});
        }
    },
    /**
     * - sayMutation Mutation name.
     * @param {Object} context Information provided by `riotx` to `Mutation`.
     * - context.getter Store.getter shortcut
     * - context.state Store.state object
     * @param {Object} data Data from this caller. (from action)
     * @return {Array} The name of the subscriber who wants to let you catch fire.
     */
    mutations: {
        sayMutation: (context, data => {
            context.text = `${context.getter('sayGetter')} ${data.text}`;
            context.state.text = text;
            return ['sayChangeMutation'];
        }
    },
    plugins: [
        /**
         * @param {Object} store Store instance.
         */
        store => {
            /**
             * - plugin subscriber
             * @param {String} name It will be hooked after running all `mutations`. 
             * Event name : `riotx:mutations:after`
             * @param {Array} triggers Subscriber list
             * @param {Object} context Information provided by `riotx` to  `Mutation`.
             * - context.getter Store.getter shortcut
             * - context.state Store.state object
             */
            store.change('riotx:mutations:after', (name, targets, context, data) => { // eslint-disable-line no-unused-vars
            if (name === 'sayMutation' && targets.includes('sayChangeMutation')) {
                context.state.text = `Override ${context.state.text} :(`;
            }
            });
        },
    ]
})

Call!

/**
 * @param {String} name Action name
 * @param {Object} data Data to carry to Action. 
 * 
 */
store.action('sayAction', {'text': 'World'})

Subscribe

store.change('sayChangeMutation', (state, store) => {
    const text = store.getter('sayAppendSuffixGetter', {text: ':)'})
    console.log(text); // > 'Override Hello World :)'
    console.log(state); // > {Store.state object}
    console.log(store); // > {riotx.Store instance}
})

Check

• action
• mutation
• getter
• plugin

`strict modet` support.

Directly changing the state property from outside will occur an exception.
You can change it through “mutations”, or you can get it via “getters”.

Update document

Issue #27

Plugin support

• It will be hooked after running all mutations.

"Store.reset()" removes the given all event listeners

this.riotxChange example

Provides examples using this.riotxChange(appStore.... please

Do you support store.change( '*' ) ?

Issue Description

I try

store.change('*', (state, store) => {
  console.log(state);
} );

but, Output is...

"riotx:mutations:after"
"changeTitle"

why? Do you support store.change( '*' ) ?

Browser Information

• Browser Name, Version

Dependency Library

"riot": "^3.9.1",
"riotx": "^2.0.2"

Your Code

If relevant, paste all of your challenge code in here

Screenshot

【質問】riotxとvuexにおける「ミューテーションとアクションとの関係の違い」について

Issue Description

• vuexの場合、「ミューテーションは同期的なステートの変更のために使う。アクションは非同期的な処理結果からミューテションを利用するために使う」と、ミューテーションとアクションとは利用目的による明確な使い分けがありました。一方でriotxは、「ミューテーションでもアクション経由で利用することを推奨」となっています。この違いは、どのような理由で起こっているのでしょうか？

Update library to riot v4

Issue Description

Any plans for upgrading this library to riot v4?

Dependency Library

• riot = 4.x
• riotx = 2.x

✨ Revamp the document.

• GitBook

Removed ObjectAssign(object-assgin).

Hook logger

Added methods

riotx.hookLogger(Function) // @see function _output

define

settings = {
  logger: {
    output: _output  // default @see function _output
  }
  ...
}