Redux中的状态更新时,如果与当前页面的useState不同,则页面中的useState也会更新,但更新后红框中的值不会改变,始终默认为true。
import { useEffect, useState } from "react";
import store from "./redux";
import { useDispatch } from "react-redux";
import { setState } from "./redux/modules/menu";
function App() {
const dispatch = useDispatch();
const [baseState, setBaseState] = useState(true);
useEffect(() => {
console.log("baseState :>> ", baseState);
}, [baseState]);
useEffect(() => {
const unSubscribe = store.subscribe(() => {
console.log(store.getState().menu.state, baseState);
if (store.getState().menu.state !== baseState) {
setBaseState(store.getState().menu.state);
}
});
return () => unSubscribe();
}, []);
const buttonEvent = () => {
const storeState = store.getState().menu.state;
dispatch(setState(!storeState));
};
return (
<div className="App">
<h1>value: {baseState + ""}</h1>
<button onClick={buttonEvent}>change</button>
</div>
);
}
export default App;
运行结果:
2条答案
按热度按时间njthzxwz1#
所以,如果我得到了你的问题,你所做的是,在一个按钮点击,你正在改变redux状态,并在此基础上,你想改变本地状态。
但在你的
useEffect()
(第二个);您给出了一个空数组作为第二个参数,这意味着此useEffect将仅在第一次渲染时触发(类似于类组件中的componentDidMount),因此永远不会知道redux状态是否已更改。
因此,要使它工作,只需删除它们(就像我们在类组件中有componentDidUpdate一样)。
c9qzyr3d2#
我找到了最合适的解决方案,使用Redux useSelector