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?

soutot · Accepted Answer · 2017-09-08 12:56:43Z

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.

answered Sep 8, 2017 at 12:56

soutot

3,6511 gold badge23 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related