Skip to content
This repository has been archived by the owner on Jan 24, 2020. It is now read-only.

duskpoet/redux-href

Repository files navigation

redux-href

Build Status

Simple routing and query params management library written in typescript for redux.

It also uses history for location and history management, so it's compatible with nodejs and react-router.

import { createStore } from 'redux';
import rehref from 'redux-href';
import { createMemoryHistory } from 'history';

import reducer from './reducer';

interface State {
  name: string;
  userId: string;
  page: number;
}

const initialState: State = {
  name: '',
  userId: '',
  page: 0,
};

const rehrefEnhancer = rehref<State>({
  locationToState: (url, state) => ({
    ...state,
    page: Number(url.params.page),
  }),
  stateToLocation: (state) => ({
    params: {
      page: String(state.page),
    },
  }),
  history: createMemoryHistory(),
});

const store = createStore(reducer, rehrefEnhancer);

API

rehref (options: {
  locationToState: LocationToState,
  stateToLocation: StateToLocation,
  history: History,
}) => StoreEnhancer

interface LocationParams {
  path?: string; // path part of url, like "full/path" in example.com/full/path
  params?: { [name: string]: string }; // query params in url
}

/** 
 * Function that takes current href as LocationParams object, current state and returns actual state. It will be called on every history changing event.
*/
`type LocationToState<S> = (location: LocationParams, state: S) => S`

/**
 * Function that takes current state and returns object, that will be used to update current location.
 * It will be called on every dispatch to calculate location params. If returned object equals to previous result, no update will be performed.
 */
type StateToLocation<S> = (state: S) => LocationParams

If you need to push history (creating new history record) instead of replacing, then include pushHistory: true as a part of action object meta.

dispatch({
    type: "some_action",
    payload: "some_data",
    meta: { pushHistory: true },
})