useEffect 中的 Redux 调度不是同步的

Question

我想导航到 App 屏幕或 Auth 屏幕，具体取决于从服务器获取它并更新 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

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

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

useEffect(() => {
    if(someCondition) {
      props.navigation.navigate(isUser ? "App" : "Auth");
    }
    
}, [isUser]); // add all required dependencies

useEffect 中的 Redux 调度不是同步的

Redux dispatch in useEffect isn't syncronous

reactjs

react-native

redux

react-redux

react-native-navigation