Question

当路由在我的应用程序中更改时，我一直在尝试更改/重置redux状态。

我要这样做的原因：
我有一个导航，可以使用redux状态使用一个按钮进行切换以使其可见/隐藏。这按预期工作，但问题是当我转到其他路线时，状态仍然相同。这样一来，导航仍然可见。我希望能够在路由更改后将redux状态更改为其初始状态。

我的导航组件（Nav.js）如下：

import React from 'react'
import { NavLink } from 'react-router-dom'
import {
  MdMenu,
  MdKeyboardArrowDown
} from 'react-icons/md'

// Redux
import { useSelector, useDispatch } from 'react-redux'
import { toggleUserNav } from '../redux/actions/navActions'

const Nav = () => {
  const dispatch = useDispatch()
  const isAuthed = useSelector(state => state.user.authenticated)
  const userNavIsOpen = useSelector(state => state.nav.userNavIsOpen)

  const handleToggleUserNav = () => {
    dispatch(toggleUserNav())
  }

  let navLinks
  let userLinks

  if (!isAuthed) {
    navLinks = (
      <React.Fragment>
        <li className="user-nav__link">
          <NavLink to="/">Utforska</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/kategorier">Kategorier</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/om-poddifi">Om Poddifi</NavLink>
        </li>
      </React.Fragment>
    )

    userLinks = (
      <React.Fragment>
        <div><a href="/logga-in">Logga in förfan</a></div>
      </React.Fragment>
    )

  } else {
    navLinks = (
      <React.Fragment>
        <li className="user-nav__link">
          <NavLink to="/">Utforska</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/kategorier">Kategorier</NavLink>
        </li>
        <li className="user-nav__link">
          <NavLink to="/min-lista">Min lista</NavLink>
        </li>
      </React.Fragment>
    )

    userLinks = (
      <React.Fragment>
        <button onClick={handleToggleUserNav} className="user-dropdown-btn">
          <div className="user-avatar"></div>
          <div className="user-name">Jonas</div>
          <div className="user-dropdown__arrow">
            <MdKeyboardArrowDown />
          </div>
        </button>
        <nav className={`user-nav ${userNavIsOpen ? 'isOpen' : ''}`}>
          <ul>
            <li>
              <NavLink className="user-nav__link" to="/">
                Min lista
              </NavLink>
            </li>
            <li>
              <NavLink className="user-nav__link" to="/min-lista">
                Redigera profil
              </NavLink>
            </li>
            <li>
              <NavLink className="user-nav__link" to="/konto">
                Inställningar
              </NavLink>
            </li>
            <li>
              <NavLink className="user-nav__link" to="/konto">
                Logga ut
              </NavLink>
            </li>
          </ul>
        </nav>
      </React.Fragment>
    )
  }

  return (
    <div className="top-bar">
      <div className="top-bar-inner">
        <div className="nav-toggle">
          <button
            onClick={handleToggleMainNav}
            className="nav-toggle__btn">
            <MdMenu />
          </button>
        </div>
        <div className="logo">
          <NavLink to="/">Poddifi</NavLink>
        </div>
        <ul className="main-nav">
          {navLinks}
        </ul>
        <div className="secondary-nav">
          {userLinks}
        </div>
      </div>
    </div>
  )
}

export default Nav

我的导航减速器（navReducer.js）如下所示：

import { LOCATION_CHANGE } from 'react-router-redux'
import { TOGGLE_MAIN_NAV } from '../types'

const initialState = {
  mainNavIsOpen: false
}

export default function (state = initialState, action) {
  switch (action.type) {
    case TOGGLE_MAIN_NAV:
      return {
        ...state,
        mainNavIsOpen: !state.mainNavIsOpen
      }
    case LOCATION_CHANGE: 
      return initialState
    default:
      return state
  }
}

我的导航操作（navActions.js）如下：

import { TOGGLE_MAIN_NAV } from '../types'

export const toggleMainNav = () => dispatch => {
  dispatch({ type: TOGGLE_MAIN_NAV })
}

到目前为止我一直在尝试做的事情：
我已经尝试从react-router-redux使用'LOCACTION_CHANGE'，但没有成功。

任何能向我指出正确方向的人如何进行？

Answer 1

您可以实现useLocation挂钩，该挂钩在每次更改位置时都会更新。实施有关位置更改的方案。

useLocation: React Router

路由更改后如何更改Redux状态

1 个答案: