时间戳

首页 > 解决方案 > 从 Gatsby 浏览器 API 触发 Redux 操作？

javascript - 从 Gatsby 浏览器 API 触发 Redux 操作？

问题描述

如何从onRouteUpdategatsby-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)
}

标签： javascriptreactjsreduxgatsby

解决方案

我刚刚遇到了类似的问题并设法找到了解决方案。只是对未来有类似问题的人的建议。您需要像这样更改 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;
    }

推荐阅读