Add query params to current url

I want to add query param to current url, I don’t know what current url is.

For example I have /token/ETH or /user/user1 urls and want to change they to /token/ETH?m=ref or /user/user1?m=ref accordingly.

Is it possible to define an action only for updating query in URL?

Will appreciate any help

[hedgepigdaniel]

The current route action is available in the location reducer, so its quite simple to write a thunk which copies the current route action, changes some part of it, and dispatches it.

[wasinsandiego]

I know it’s closed but closed issues are still useful when people are looking for solutions, right? In case it’s useful for someone else…

This is my higher order component (using recompose and connect) that adds a function prop named queryUpdate to any component that will dispatch an action to update the query without a route change. You could modify to create a react hook or a HOC without recompose.

import { connect } from 'react-redux'
import { compose, withHandlers } from 'recompose'
// my selectors to get things from location slice
import {
  locationTypeSelector,
  locationPayloadSelector,
  locationQuerySelector
} from 'routes.selectors'

export const updateQuery = ({ type, payload, query }) => ({
  type, payload, query
})

const mapStateToProps = state => ({
  locationType: locationTypeSelector(state),
  locationPayload: locationPayloadSelector(state),
  locationQuery: locationQuerySelector(state)
})

const mapDispatchToProps = {
  updateQuery
}

export const withQueryUpdate = compose(
  connect(mapStateToProps, mapDispatchToProps),
  withHandlers({
    queryUpdate: ({ updateQuery, locationType, locationPayload, locationQuery }) => ({ query }) => {
      updateQuery({
        type: locationType,
        payload: locationPayload,
        query: { ...locationQuery, ...query }
      })
    }
  })
)