The library is created for easily synchronization between URL query params and redux state. Inspired by redux-query-sync.
Installation can be done with npm
npm install --save sync-query-redux
or yarn
yarn add sync-query-redux
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
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;
}
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;
}
- Add tests
- Add hooks support
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.