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

``bash
npm i -S redux-queryparam-middleware
`

How to use?

$3

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.

`js
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
)
);
`

$3

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.

`js
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

$3

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

Type: Object

$3

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

$3

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

$3

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