如何解决为什么我的回调使用Redux多次调用
我正在使用react
编写一个redux
应用程序,并避免使用react-redux
,如果我们手动处理所有调度的事件,从技术上讲这是可能的。这是示例代码。
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const appState= {
count: 0,}
const reducer = (state,action) => {
if (typeof state === 'undefined') state = appState;
switch (action.type) {
case 'INCREMENT':
return {count: state.count+1}
case 'DECREMENT':
return {count: state.count-1}
default:
return state
}
}
var store = Redux.createStore(reducer);
const App = () => {
const [val,setVal] = React.useState(0);
handleClick = () => {
store.dispatch({type: 'INCREMENT'})
}
const unsubscribe = store.subscribe(() => {
const state = store.getState();
console.log("Listener is called")
setVal(state.count);
});
/* unsubscribe() */;
return (
<div>
<span>{val}</span>
<button onClick={handleClick}>Click</button>
</div>
);
}
ReactDOM.render(<App />,document.querySelector("#app"))
</script>
</body>
</html>
在这里,如果我第一次单击该按钮,它将一次将日志打印到控制台,但是当我第二次单击该按钮时,它将在语句上打印两次语句,这表明两次调用了来自订阅的回调,为什么会发生这种情况以及如何防止这种情况发生?
解决方法
好像您的组件在每个渲染周期都订阅了商店,并且由于订阅回调更新了组件状态,因此又触发了另一个渲染周期。
您可能只希望该组件一次订阅您的商店。
您可以使用效果订阅一次以记录状态更新的状态。使用效果清除功能退订。
const App = () => {
const [val,setVal] = React.useState(0);
handleClick = () => {
store.dispatch({type: 'INCREMENT'})
}
useEffect(() => {
const unsubscribe = store.subscribe(() => {
const state = store.getState();
console.log("Listener is called",state.count);
setVal(state.count);
});
/* unsubscribe() */;
return unsubscribe; // <-- return cleanup function
},[]); // <-- empty dependency array to run once on mount
return (
<div>
<span>{val}</span>
<button onClick={handleClick}>Click</button>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。