在 url 更改时重置 redux 状态

Question

我有一个使用 redux 的项目。但是当我点击 <Link> 组件或点击 chrome 上的“上一页”按钮时，redux 会保留我之前更改的状态。我尝试了 connected-react-router 中的 LOCATION_CHANGE 操作并在 reducer 中使用它，但它似乎不起作用。

减速器：

import {LOCATION_CHANGE} from "connected-react-router"
function reducer(state=defaultState,action) {
    switch (action.type) {
        case LOCATION_CHANGE:
            console.log("changed")
            return defaultState
        default:
            return state
    }
}

Answer 1

您可以尝试这样的操作：

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0);
      dispatch({ type: LOCATION_CHANGE });
    }
  }

  render() {
    return this.props.children
  }
}

export default withRouter(ScrollToTop)

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

在 url 更改时重置 redux 状态

Resetting redux states on url change

javascript

reactjs

redux

connected-react-router