从 Gatsby 浏览器 API 触发 Redux 操作？答案

【问题标题】：Trigger Redux Action from Gatsby Browser API?从 Gatsby 浏览器 API 触发 Redux 操作？
【发布时间】：2020-09-12 15:21:49
【问题描述】：

如何从 onRouteUpdate gatsby-browser.js API 中触发 redux 操作。

我有一个 TOGGLE_MENU 操作需要在用户成功导航到新页面时设置为 false，以关闭手机/平板电脑上的菜单。

我正在使用gatsby-plugin-react-redux 插件。

这里的当前实现：https://dev.poshwash.london

我尝试添加store.dispatch(toggleMenu(false))，但没有成功。

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
/**
 * Implement Gatsby's Browser APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/browser-apis/
 */

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)
}

【问题讨论】：

标签： javascript reactjs redux gatsby

【解决方案1】：

我刚刚遇到了类似的问题并设法找到了解决方案。只是对未来有类似问题的人的建议。你需要改变你的 src/state/createStore.js 像这样的文件。

    import { createStore } from "redux"
    import { composeWithDevTools } from "redux-devtools-extension"
    import rootReducer from "."
    
    // After that you will need 
    // to import and use dispatch
    // on this variable
    // and import it like this: 
    // import { store } from "./src/state/createStore"
    export let store;
    
    // preloadedState will be passed in by the plugin
    export default preloadedState => {
      store = createStore(rootReducer, preloadedState, composeWithDevTools());
      return store;
    }

【讨论】：

【解决方案2】：

只需从存储 Provider 的 JS 文件中导出一个函数，然后在 gatsby-broswer.js onRouteUpdate 函数上调用它

ReduxWrapper.js

import React from 'react'
import { Provider } from 'react-redux'
import { ACTION } from './store/actions'
import {store} from './configureStore'



export const OnRouteChange = () => {
    store.dispatch(ACTION())
}

    export default ({ element, ...rest }) => {
        return (
        <Provider store={store}>
            {element}
        </Provider>
    )};

gatsby-browser.js

import { OnRouteChange } from './src/store/ReduxWrapper' 
export { default as wrapRootElement } from './src/store/ReduxWrapper'


export const onRouteUpdate = ({ location, prevLocation }) => {
  //call your function that you exported from provider
  console.log('Changing route here')
  OnRouteChange()
}

【讨论】：