Skip to content
This repository has been archived by the owner on Dec 15, 2018. It is now read-only.

Add param/query transformation function to route definitions #214

Closed
drKnoxy opened this issue Jul 27, 2017 · 4 comments
Closed

Add param/query transformation function to route definitions #214

drKnoxy opened this issue Jul 27, 2017 · 4 comments
Labels

Comments

@drKnoxy
Copy link

drKnoxy commented Jul 27, 2017

It would be sweet if there were transformation functions that could be applied to the parameters of the url or the query based on route

something like:

const routes = {
  '/house/:id': {
    transform({ params, query) {
      return {
        params: parseInt(params.id, 10),
        query: {
          ...query,
          sort: sortOptions.includes(query.sort) || 'popularity',
          features: query.features ? query.features.split(',') : [],
      };
    }
  }

If this sounds good, and you would point me at some files i'd be glad to start a branch.

@drKnoxy drKnoxy changed the title Add transformation function to route definitions Add param/query transformation function to route definitions Jul 27, 2017
@dpwrussell
Copy link

dpwrussell commented Jul 27, 2017

Unless I've misunderstood the purpose of this, I think you might be better served with selectors than a transformation. That way the true state remains if you were to need it for something else.

As we already have redux, and redux-little-router takes care of making sure that is up to date (#211 aside) with the query parameters, this is the minimum state. If you then want to get query parameters with a certain transformation, you could write (untested):

import { createSelector } from 'reselect';

const getRouter = state => state.router;

export const getRouteQueryFeatures = createSelector(
  [ getRouter ],
  router => router.query && router.query.features ? router.query.features.split(',') : []
);

Then in a component:

import { getRouteQueryFeatures } from './selectors';

const FeatureList = props => <ul>{ props.features.map(feature => <li>{ feature }</li>) }</ul>;

export default connect(state => ({ features: getRouteQueryFeatures(state) }))(FeatureList);

@drKnoxy
Copy link
Author

drKnoxy commented Aug 4, 2017

Yeah, i thought it just looked nicer to colocate the "type transformations" with the route, especially for params. I prefer the idea of storing
/post/:id
/post/123
in redux as number 123 instead of string 123.

@dpwrussell
Copy link

I'm actually not sure why it is stored in redux at all when it could be calculated by a selector from the route.

@tptee
Copy link
Contributor

tptee commented Oct 18, 2017

Yep, I agree with @dpwrussell that selectors are the tool for this job 😃

@tptee tptee closed this as completed Oct 18, 2017
@tptee tptee added the question label Oct 18, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

3 participants