Using a query string to trigger an action in Redux/React Router

Question

I've created a login action that is used to trigger a modal.

export function showLogin () {
  return dispatch => {
    dispatch(loginShow());
  };
}

In the reducer the isActive state then gets updated.

case actionNames.LOGIN_SHOW:
  return Object.assign({}, state, {
    isActive: true
  });

If isActive is true then I conditionally show a custom modal component.

<Modal 
  isActive={this.props.login.isActive} 
  hideModal={this.props.hideLogin}
>
  <LoginContainer />
</Modal>

What I want to do now is trigger the modal via a query string on all routes e.g. /some-slug?login=true.

I'm using react router 4 but I can't figure out to get this working, I want to avoid having to check the query string in each component and would rather have a central location where I check the QS and then fire the relevant actions.

I've done some searching but I can't see to find a solution to this, I tried creating a wrapper component around each of my routes and then via a switch statement firing the relevant action based on QS, this doesn't seem to work though.

<Route path="/" exact component={QueryStringWrapper(HomeContainer)} />

Can anyone offer some advice?

Answer 1

You can't trigger an action directly from the querystring before getting and checking it somewhere in your component. You might not be able to avoid this. If you have an independent component for your login, you can check the querystring (or receive it by props) and decide whether or not to call your action, then you can import this component to your app and won't have to repeat the querystring checking every time. If your login is in the same component of your app, then you can check it on your componentWillMount, for instance.

Hope it helps.