useSelector不更新值,也不触发useEffect,但值可以使用store (redux)读取



我已经使用Redux相当一段时间了,但由于某种原因,我的代码就是不工作:

import { store } from "../pages/_app";
....
const dispatch = useDispatch();
const [state_sample, setSs]: any = useState(0); // - just use for triggering useEffect
const audioCurrentTimeState: any = useSelector((state: RootState) => {
state.AudioCurrentTimeState;
});
useEffect(() => { // - I am trying to trigger this useEffect but it doesn't work
console.log(audioCurrentTimeState); // - doesn't work (?)
console.log(store.getState().AudioCurrentTimeState); // - works
}, [audioCurrentTimeState, state_sample]);
return (
<div className={style.waveform_component_root}>
<p
onClick={() => {
console.log("clicked!");
setSs(Math.random()); // - just use for triggering useEffect
dispatch({
type: "AudioCurrentTimeReducer/SET",
value: Math.random(),
});
}}
>
click me
</p>
</div>)

这是audioCurrentTimeState的减速机:

export const AudioCurrentTimeReducer = (value = 0, action: any) => {
switch (action.type) {
case "AudioCurrentTimeReducer/SET":
return action.value;
default:
return value;
}
};

这里是rootState:

import { combineReducers } from "redux";
import {
AudioCurrentTimeReducer,
} from "./reducers/reducers";
const rootReducers = combineReducers({
AudioCurrentTimeState: AudioCurrentTimeReducer,
});
export type RootState = ReturnType<typeof rootReducers>;
export default rootReducers;

我用redux这样设置:

import type { AppProps } from "next/app";
import { createStore } from "redux";
import { Provider } from "react-redux";
import rootReducers from "../scripts/redux/rootReducer";
export const store = createStore(rootReducers);
export default function App({ Component, pageProps }: AppProps) {
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
);
}

我以前从未遇到过这个问题,如果有任何更改,我似乎找不到任何参考。但是正如你从上面看到的,我只能得到AudioCurrentTimeState的值,如果我用store.getState().AudioCurrentTimeState而不是useSelector来命名它,我需要为此触发useEffect。

您忘记返回useSelector

中的值了正确的:

const audioCurrentTimeState: any = useSelector((state: RootState) => {
RETURN state.AudioCurrentTimeState;
});
// OR short
const audioCurrentTimeState: any = useSelector((state: RootState) => state.AudioCurrentTimeState);

:

const audioCurrentTimeState: any = useSelector((state: RootState) => {
state.AudioCurrentTimeState;
});

相关内容