Redux dispatch in useEffect isn't syncronous

问题

I want to navigate to App screen or Auth screen, depending on the isUser prop after fetching it from the server and updating the redux store.

My first component AuthLoading.js which looks like this:

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();
  }, []);

My authActions.js looks like this:

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,
      });
    });
  };
};

My authReducer.js looks like this:

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

And the store:

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "../reducers";

const configureStore = () => {
  return createStore(rootReducer, applyMiddleware(thunk));
};

export default configureStore;

Unfortunately, the code inside AuthLoading.js isn't asynchronous, and isn't waiting for the updated isUser value and running the next line without it.

I've tried to .then after dispatch which still doesn't work. I've tried changing async states and still couldn't find the problem. I have no idea how to fix this. Thanks for the help.

回答1:

You can use another useEffect hook that runs when isUser changes and navigate inside it.

This useEffect runs once the component mounts and every time isUser changes, so someCondition can be anything that determines whether the navigation should happen or not.

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

来源：https://stackoverflow.com/questions/62763219/redux-dispatch-in-useeffect-isnt-syncronous