urlPushAction.md

urlPushAction(actionType, [encodeQuery])

A helper function to create action creators that can create actions interpretable by urlQueryMiddleware and urlQueryReducer to push a new query into the URL, replacing what was there previously and adding an entry to the history stack. The standard format of an action produced by the action creators this function creates is:

{
  type: actionType,
  meta: {
    updateType: UrlUpdateTypes.push,
    urlQuery: true
  },
  payload: {
    encodedQuery: Object,
    decodedQuery: Object,
  }
}

Arguments

1. actionType (String): The standard redux action type, maps to type in the action.
2. [encodeQuery] (Function): A function that takes in a query object and maps it to an Object where the keys represent query parameters and the values represent encoded String values.

Returns

(Function): An action creator that will produce an action that is recognizable by urlQueryMiddleware and urlQueryReducer.

Remarks

• The default urlQueryReducer provided by React URL Query interprets the updateType property in the meta of the action to update the URL accordingly. If you are not using it, you'll need to do so manually.

Examples

const changeFooBar = urlPushAction(
  'CHANGE_FOO_BAR',
  query => ({ foo: String(query.foo), bar: query.bar })
);
dispatch(changeFooBar({ foo: 137, bar: 'baz' }));
/*
dispatches action of form:
  {
    type: 'CHANGE_FOO_BAR',
    meta: {
      urlQuery: true,
      updateType: UrlUpdateTypes.push
    },
    payload: {
      encodedQuery: { foo: '137', bar: 'baz' },
      decodedQuery: { foo: 137, bar: 'baz' }
    }
  }
*/