Redux dispatch in useEffect不是同步的

Question

我想导航到应用程序屏幕或身份验证屏幕，具体取决于从服务器获取并更新 redux 存储后的 isUser 属性。

我的第一个组件AuthLoading.js如下所示：

const AuthLoading = (props) => {
const isUser = useSelector((state) => state.authReducer.isUserExists);
const dispatch = useDispatch();
const fetchData = async () => {
const token = await TokensHandler.getTokenFromDevice();
dispatch(isTokenExists(token));
props.navigation.navigate(isUser ? "App" : "Auth");
};
useEffect(() => {
fetchData();
}, []);

我的authActions.js如下所示：

export const isTokenExists = (token) => {
return (dispatch) => {
return HttpClient.get(ApiConfig.IDENTITY_PORT, "api/identity", {
userId: token,
}).then((response) => {
console.log(response);
dispatch({
type: IS_USER_EXISTS,
payload: response,
});
});
};
};

我的authReducer.js如下所示：

const authReducer = (state = initialState, action) => {
switch (action.type) {    
case IS_USER_EXISTS:
return {
...state,
isUserExists: action.payload,
};
default:
return state;
}
};

和商店：

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "../reducers";
const configureStore = () => {
return createStore(rootReducer, applyMiddleware(thunk));
};
export default configureStore;

不幸的是，AuthLoading.js中的代码不是异步的，并且不会等待更新的 isUser 值并在没有它的情况下运行下一行。

我试图在调度后 .then 仍然不起作用。 我尝试更改异步状态，但仍然找不到问题。 我不知道如何解决这个问题。 感谢您的帮助。

Answer 1

您可以使用另一个在isUser更改时运行的useEffect钩子并在其中导航。

此useEffect在组件装载后运行，并且每次isUser更改时运行，因此someCondition可以是确定是否应进行导航的任何内容。

useEffect(() => {
if(someCondition) {
props.navigation.navigate(isUser ? "App" : "Auth");
}

}, [isUser]); // add all required dependencies