redux-queryparam-middleware

Simple redux middleware which will store (part of) the payload of specified actions in the url and is able to retrieve an initial state from the url

Installation

npm i -S redux-queryparam-middleware

How to use?

Use middleware

The middleware can be dropped into the redux middleware chain and will store the payload of one or more FSA complient actions in the url query parameters.

  import {applyMiddleware, createStore, compose} from 'redux';
  import createQueryparamMiddleware from 'redux-queryparam-middleware';

  const queryparamMiddleware = createQueryparamMiddleware({
    /** The types of the actions to listen for can be used for multiple **/
    types: ['MAP_MOVED'],
    /** The values to pick from the payload to store in the url. It will default to the entire flattened payload when nothing is specified **/
    include: ['center', 'bounds'],
    /** The specified queryparam values will be removed from the url when an action named in types is fired **/
    omit: ['bounds'],
    /** The transformer is an object which will modify the values of included parts of the payload. **/
    transformer: {
      center: (center) => convertToLatLngString(center),
    }
  });

  let store = createStore(
    rootReducer, // The main reducer
    initialState, // The state to load and prefill the redux store with
    compose(
    applyMiddleware(
      // All middleware
      queryparamMiddleware
    )
  );

Get initial state

Only using the middleware to store the state tree is not that usefull. That's why redux-queryparam-middleware also supports initialising the state from url parameters.

  import {applyMiddleware, createStore, compose} from 'redux';
  import createQueryparamMiddleware, {getQueryparamState} from 'redux-queryparam-middleware';

  const queryparamMiddleware = createStorageMiddleware({
    types: ['MAP_MOVED'],
    include: ['center', 'zoom'],
    omit: ['bounds'],
    transformer: {
      center: (center) => convertToLatLngString(center),
    },
  });

  const initialState = getQueryparamState({
    /** The query params to read from the url and use as part of the initialState **/
    keys: ['center', 'zoom', 'bounds'],
    /** The transformer is an object which will modify the values of specific query  params **/
    transformer: {
      center: (center) => convertToLatLng(center),
      bounds: (bounds) => convertToBounds(bounds),
    },
    /** You need to specify a reducer to add the state to **/
    reducer: 'map',
    /** The state to apply the query params state to **/
    state: initialState,
  });

  let store = createStore(
    rootReducer, // The main reducer
    initialState, // The state to load and prefill the redux store with
    compose(
      applyMiddleware(
        // All middleware
        queryparamMiddleware
      )
    )
  );

Reference

queryparamMiddlewareTransformer

This is used to transform the request to the right right queryparams

Type: Object

createQueryparamMiddleware

This middleware for redux will store a slice of the redux state in queryparams

Parameters

• settings any Object containing all configuration for the queryparam middleware
  • settings.types A collection of action types to listen to
  • settings.include Properties of the payload objects of the types to store in the url
  • settings.omit A collection of properties to remove from the url when an action runs
  • settings.transformer An object containing methods to transform certain payload values

Returns any The final result when all reducers have been run

getQueryparamState

This will get the current state information from the queryparams

Parameters

• settings any An object containing the settings to retreive the state from the queryparams
  • settings.keys The keys to read from the url
  • settings.transformer An object containing methods to transform certain querparam values
  • settings.reducer The reducer to update in the store
  • settings.state The initial state to modify

Returns Object An object containing the needed information in the right format

getQueryparamData

This will get an object containing the data contained in the queryparams

Parameters

• settings any An object containing the settings to retreive the state from the queryparams
  • settings.keys The keys to read from the url
  • settings.transformer An object containing methods to transform certain querparam values

Returns Object An object containing the needed information in the right format