Nuclearly Potent Moonshine

    sync-query-redux

    1.0.6 • Public • Published

    GitHub license npm npm bundle size (minified + gzip) Build Status codecov

    The library is created for easily synchronization between URL query params and redux state. Inspired by redux-query-sync.

    Installation

    Installation can be done with npm

    npm install --save sync-query-redux

    or yarn

    yarn add sync-query-redux

    Usage

    plain-sync

    import { plainSync } from "sync-query-redux";
    import createHistory from "history/createBrowserHistory";
     
    const history = createHistory();
     
    const pathname = "/somePathname";
    const actionCreator = newQueryString => ({
      type: "SOME_ACTION",
      newQueryString
    });
    const selector = state => state.queryString;
    const options = {
      parseQuery: true,
      stringifyState: true,
      relyOn: "location",
      replaceState: true
    };
     
    const syncer = new plainSync.Syncer(pathname, actionCreator, selector, options);
    const sync = new plainSync.Sync(store, history, syncer);
    const stopSync = sync.start(); // use this function to stop synchronization

    The core is Syncer object, which should be injected into Sync.

    Working example can be found here. You just need to run:

    npm i
    npm run start

    or with yarn

    yarn
    yarn start

    API

    Syncer

    type ActionCreator = (
      search: string | Object
    ) => { type: string, [key: string]: any };
     
    type Selector = (state: Object) => any;
     
    type Options = {
      parseQuery?: boolean,
      stringifyState?: boolean,
      replaceState?: boolean,
      relyOn?: "location" | "state"
    };
     
    interface ISyncer {
      constructor(
        pathname: string,
        actionCreator: ActionCreator,
        selector: Selector,
        options: ?Options
      ): void;
    }

    Sync

    import type { BrowserHistory as History } from "history/createBrowserHistory";
    import type { Store } from "redux";
    import Syncer from "./Syncer";
     
    interface ISync {
      constructor(store: Store<any, any>, history: History, syncer: Syncer): void;
      start(): Function;
    }

    Plans

    • Add tests
    • Add module params-sync in which Sync will not have selector and actionCreator, but a list of params where each param will have its selector and its actionCreator.
    • Make library available as a redux middleware

    Contributions

    Contributors are welcome. Please discuss new features and submit PRs for bug fixes with tests. Run npm run build which detects type errors, tests passing status and build the lib if everything is well.

    License

    MIT

    Install

    npm i sync-query-redux

    DownloadsWeekly Downloads

    1

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    13.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • teimurjan