在 url 更改时重置 redux 状态

Question

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

还原剂：

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