Update redux store from onRouteUpdate?

[jonny-harte]

Hi, how do I update a redux store from within Gatsby Browser API?

I need to update a TOGGLE_MENU action from within onRouteUpdate to close a mobile menu.

[herecydev]

Not sure it's possible within onRouteUpdate but you could either do it when the user clicks on a link (onChange) or use wrapPageElement to fire when the route has just changed.

[jonny-harte]

Thanks @herecydev. I'm trying to avoid using clicks because I want to ensure the new page has loaded behind the menu before it closes. How would you use wrapPageElementto do it?

[herecydev]

Use wrapPageElement, this will give you access to each page's props. I'm guessing you would want to inspect the path prop and then dispatch an appropriate action into your redux.

[LekoArts]

As @herecydev correctly said you'll want to use the wrapPageElement API to listen for the props.location changes. In order to be able to access your Redux store you should set up the provider via the wrapRootElement API: https://www.gatsbyjs.com/docs/browser-apis/#wrapRootElement

One more thing to note/a tip: When you also keep the menu in wrapPageElement the component doesn't unmount and so you can have animations between page changes. Here's an example: https://frostkommunikation.dk/
When you go to the menu and go to another site the route already changes but the animation does its thing nevertheless.

[jonny-harte]

@LekoArts So I need both wrapPageElement and wrapRootElement in gatsby-browser?

I'm using gatsby-plugin-react-redux which already creates a provider. Does it matter if I have 2 providers or will I need to remove this plugin?

Heres how I currently have it setup

src/state/app.js
const initialState = {
  isMenuOpen: false,
  scrollY: 0,
}

const TOGGLE_MENU = "TOGGLE_MENU"
export const toggleMenu = isOpen => ({ type: TOGGLE_MENU, payload: isOpen })

export default (state = initialState, action) => {
  const { type, payload } = action
  switch (type) {
    case TOGGLE_MENU: {
      const scrollY = payload ? window.scrollY : state.scrollY

      return { ...state, isMenuOpen: payload, scrollY }
    }
    default: {
      return state
    }
  }
}

src/state/createStore.js
import { createStore } from "redux"
import { composeWithDevTools } from "redux-devtools-extension"
import rootReducer from "."

// preloadedState will be passed in by the plugin
export default preloadedState => {
  return createStore(rootReducer, preloadedState, composeWithDevTools())
}

gatsby-browser.js
import { toggleMenu } from "./src/state/app"
import store from "./src/state/createStore"

export const onRouteUpdate = ({ location, prevLocation }) => {
  store.dispatch(toggleMenu(false))
  console.log("new pathname", location)
  console.log("old pathname", prevLocation)
}

[herecydev]

If you're using gatsby-plugin-react-redux then it's already doing the wrapRootElement for you. So you only need to use wrapPageElement and dispatch actions. That's it