navigateAction queries and params

[mmahalwy]

I have found the best and the only way to add queries is like this:

this.context.executeAction(navigateAction, {
   url: `/search?q=${searching}`
});

Mind elaborating on what the right way to do this is? `

[KATT]

I've done the following work-around on my homePage route that I want to have a ?region= on with nojs-friendly <NavLink>s.

I think it's a hack, but it seems to do the trick.

routes.js:

import _ from 'lodash';

let homePage = {
    path: '/',
    method: 'get',
    page: 'home',
    title: 'Home',
    action: require('../actions/showHome'),
    handler: require('../components/blocks/HomePage/HomePage.js'),
};

export default {
    home: homePage,
    homeWithRegion: _.defaults({
        path: '/?region=:perm_name',
        page: 'homeWithRegion',
    }, homePage),
};

actions/showHome.js

export default function (context, route, done) {
    let permName = route.get('query').get('region') || 'london';

    let params = {
        perm_name: permName,
    };

    let promises = [];

    context.dispatch('SET_CURRENT_REGION_PERMNAME', permName);

    promises.push(new Promise((resolve, reject) => {
        // Load from service
        context.service.read('regions', params, {}, function (err, data) {
            if (err) {
                return reject(err);
            }

            context.dispatch('RECEIVE_REGION', data);
            resolve();
        });
    }));

   // (here I do another `promises.push()` that I've cut out

    Promise.all(promises)
        .then(function() {
            done();
        })
        .catch(done)
}

in component

import React from 'react';

class MyComponent extends React.Component {
    render() {
        let region = this.props.region;
        let navParams = {
            perm_name: region.perm_name
        };
        return (
            <NavLink
                routeName="homeWithRegion"
                navParams={navParams}
                preserveScrollPosition={true}>
                {region.name}
            </NavLink>
        )
    }
}

[KATT]

The above will break if there's more than one query param, but since I only have to deal with one it's not really a problem for me, for now.

[kosmotaur]

How about POSTing some form data? I have no clue how to pass the data down. In my form component I have a handler like

function onSubmit(e) {
  e.preventDefault();
  this.context.executeAction(
    navigateAction,
    {
      url: '/signin',
      method: 'POST',
      params: this.formData
    }
  );
}

and my routes looks like:

module.exports = {
  signinPost: {
    method: 'POST',
    path: '/signin',
    handler: SigninComponent,
    action(context, payload, done) {
      console.log(payload.toJS());
      done();
    }
  }
};

There's no trace of the formData in any form in the payload passed to the anonymous action in the routes.

[pumpikano]

@kosmotaur, it seems that that data should be present based on the docs. I submitted https://github.com/yahoo/fluxible-router/pull/64 for this.

[redonkulus]

Fixed by https://github.com/yahoo/fluxible-router/pull/64