javascript - 在 url 更改时重置 redux 状态

Question

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

减速器：

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