doc/listate.js.html

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>listate Source: listate.js</title>

	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">

	<link type="text/css" rel="stylesheet" href="styles/site.spacelab.css">

</head>

<body>

<div class="navbar navbar-default navbar-fixed-top ">
<div class="container">
	<div class="navbar-header">
		<a class="navbar-brand" href="index.html">listate</a>
		<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
        </button>
	</div>
	<div class="navbar-collapse collapse" id="topNavigation">
		<ul class="nav navbar-nav">
			
			<li class="dropdown">
				<a href="modules.list.html" class="dropdown-toggle" data-toggle="dropdown">Modules<b class="caret"></b></a>
				<ul class="dropdown-menu ">
					<li><a href="module-listate.html">listate</a></li><li><a href="module-listate_extra.html">listate/extra</a></li>
				</ul>
			</li>
			
		</ul>
        
            <div class="col-sm-3 col-md-3">
                <form class="navbar-form" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="q" id="search-input">
                        <div class="input-group-btn">
                            <button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        
	</div>

</div>
</div>


<div class="container" id="toc-content">
<div class="row">

	
	<div class="col-md-12">
	
		<div id="main">
			

		<h1 class="page-title">Source: listate.js</h1>
    
<section>
    <article>
        <pre
            class="sunlight-highlight-javascript linenums">/*
 * listate
 * https://github.com/gamtiq/listate
 *
 * Copyright (c) 2017-2019 Denis Sikuler
 * Licensed under the MIT license.
 */

/* global clearTimeout, setTimeout */

/**
 * Library for listening on changes of Redux store state.
 * 
 * @module listate
 */

/**
 * Store object.
 *
 * @typedef {Object} Store
 *
 * @property {Function} dispatch
 *      Dispatches an action to trigger a state change.
 * @property {Function} getState
 *      Returns the current state.
 * @property {Function} subscribe
 *      Adds a change listener.
 */

/**
 * Parameter that is passed when calling the listener.
 *
 * @typedef {Object} HandleParam
 *
 * @property {any} current
 *      The current state or a part of the current state if `filter` is set.
 * @property {any} data
 *      The auxiliary data (value of `listener.data` parameter).
 * @property {Function} dispatch
 *      Reference to `dispatch` method of the store.
 * @property {any} prev
 *      The previous state or a part of the previous state if `filter` is set.
 * @property {object} prevState
 *      The previous state.
 * @property {object} state
 *      The current state.
 * @property {module:listate~Store} store
 *      The store for which listener is registered.
 * @property {Function} unlisten
 *      The function that removes/unsubscribes the listener.
 */

/**
 * Check whether current value (state) is not equal previous value (state).
 *
 * Uses `!==` for comparison.
 *
 * @param {object} state
 *      A current value (state).
 * @param {object} prevState
 *      A previous value (state).
 * @return {boolean}
 *      `true` if current value is not equal previous value.
 */
export function baseWhen(state, prevState) {
    return state !== prevState;
}

// eslint-disable-next-line max-params, require-jsdoc
function run(func, context, param, once) {
    return () => {
        func.call(context, param);
        if (once) {
            param.unlisten();
        }
    };
}

/**
 * Add/register state change listener for the given store.
 *
 * @example
 * import listen from 'listate';
 *
 * const store = createStore(reducer, initState);
 *
 * listen(store, {
 *     filter: (state) => state.section,
 *     when: (current, prev) => current !== prev &amp;&amp; current !== 'exit',
 *     delay: 1000,
 *     handle: (data) => {
 *         // data.current === state.section
 *         localStorage.setItem('selectedSection', data.current);
 *     }
 * });
 *
 * @param {module:listate~Store} store
 *      Store for which listener should be added/registered.
 * @param {Function | object} listener
 *      Specifies listener that should be called on a state change.
 *      Can be a function or an object that defines listener settings/details.
 * @param {Function} listener.handle
 *      Listener that should be called on a state change.
 * @param {boolean | object} [listener.context]
 *      Object that should be used as `this` value when calling the listener.
 *      When `true` is passed `listener` object will be used as `this`.
 *      False value (by default) means that `null` will be used as the context object.
 * @param {any} [listener.data]
 *      Any data that should be passed into the listener.
 * @param {number} [listener.delay]
 *      Specifies that listener should be called after the given number of milliseconds have elapsed.
 *      Works similar to `debounce`: when several requests for the listener call arrive during the specified period
 *      only the last one will be applied after the timeout.
 *      `0` is acceptable value that means the listener should be called asynchronuosly.
 *      Negative number means that the listener should be called without delay.
 * @param {Function} [listener.filter=(state) => state]
 *      Function (selector) to extract state part which will be used inside `when` to determine
 *      whether the listener should be called. By default the entire state will be used.
 * @param {boolean} [listener.once=false]
 *      Whether the listener should be called just once.
 * @param {Function} [listener.when=baseWhen]
 *      Function to determine whether the listener should be called.
 *      The listener will be called if the function returns true.
 *      The following parameters will be passed into the function:
 *
 *    * the current state or a part of the current state if `filter` is set.
 *    * the previous state or a part of the previous state if `filter` is set.
 *    * an object that will be passed into listener.
 *
 * @return {Function}
 *      A function that removes/unsubscribes the listener.
 * @alias module:listate.listen
 */
export default function listen(store, listener) {
    const settings = typeof listener === 'function'
        ? {handle: listener}
        : listener;
    const { handle, data, filter, once } = settings;
    let context = settings.context || null;
    if (context &amp;&amp; typeof context !== 'object') {
        context = listener;
    }
    const delay = typeof settings.delay === 'number'
        ? settings.delay
        : -1;
    const when = settings.when || baseWhen;
    let prevState = store.getState();
    let prev = filter
        ? filter(prevState)
        : prevState;
    let timeoutId;
    
    const unlisten = store.subscribe(() => {
        const state = store.getState();
        const current = filter
            ? filter(state)
            : state;
        const param = {
            current,
            prev,
            state,
            prevState,
            data,
            store,
            dispatch: store.dispatch,
            unlisten
        };
        prevState = state;
        if (when(current, prev, param) &amp;&amp; handle) {
            prev = current;
            if (delay &lt; 0) {
                handle.call(context, param);
                if (once) {
                    unlisten();
                }
            }
            else {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(run(handle, context, param, once), delay);
            }
        }
        else {
            prev = current;
        }
    });

    return unlisten;
}

export { listen };
</pre>
    </article>
</section>


		</div>
	</div>

	<div class="clearfix"></div>

	
</div>
</div>


    <div class="modal fade" id="searchResults">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Search results</h4>
          </div>
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div>


<footer>


	<span class="copyright">
	Copyright (c) 2017-2019 Denis Sikuler
	</span>

<span class="jsdoc-message">
	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a>
	
		on 2019-06-22T20:49:22+03:00
	
	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
</span>
</footer>

<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/toc.js"></script>

    <script type="text/javascript" src="scripts/fulltext-search-ui.js"></script>


<script>
$( function () {
	$( "[id*='$']" ).each( function () {
		var $this = $( this );

		$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
	} );

	$( ".tutorial-section pre, .readme-section pre, pre.prettyprint.source" ).each( function () {
		var $this = $( this );

		var example = $this.find( "code" );
		exampleText = example.html();
		var lang = /{@lang (.*?)}/.exec( exampleText );
		if ( lang && lang[1] ) {
			exampleText = exampleText.replace( lang[0], "" );
			example.html( exampleText );
			lang = lang[1];
		} else {
			var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/);
			lang = langClassMatch ? langClassMatch[1] : "javascript";
		}

		if ( lang ) {

			$this
			.addClass( "sunlight-highlight-" + lang )
			.addClass( "linenums" )
			.html( example.html() );

		}
	} );

	Sunlight.highlightAll( {
		lineNumbers : true,
		showMenu : true,
		enableDoclinks : true
	} );

	$.catchAnchorLinks( {
        navbarOffset: 10
	} );
	$( "#toc" ).toc( {
		anchorName  : function ( i, heading, prefix ) {
			return $( heading ).attr( "id" ) || ( prefix + i );
		},
		selectors   : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4",
		showAndHide : false,
		smoothScrolling: true
	} );

	$( "#main span[id^='toc']" ).addClass( "toc-shim" );
	$( '.dropdown-toggle' ).dropdown();

    $( "table" ).each( function () {
      var $this = $( this );
      $this.addClass('table');
    } );

} );
</script>


<!--Navigation and Symbol Display-->


<!--Google Analytics-->


    <script type="text/javascript">
        $(document).ready(function() {
            SearcherDisplay.init();
        });
    </script>


</body>
</html>