使用useReducer状态不变的React上下文api

Question

我有一个Auth屏幕和一个HomeScreen，为了管理我使用的Context API的状态，我有两个状态->；1( user状态，我决定是否通过身份验证(从服务器获取信息时(，2(loading状态，当所有这些发生时显示加载屏幕。问题是，一切都在工作，甚至将user的状态从null设置为来自API的定义良好的对象，并且以同样的方式，我正在更改loading的状态，但它没有更改，尽管我使用相同的方法进行调度，但每次都是false。

上下文文件：

import React, { createContext, useContext, useReducer } from 'react';
import {UserReducer} from './reducers';
const initialState = {
  user: null,
  loading: false,
};
const UserContext = createContext(initialState);
export const UserProvider = ({children}) => {
  const [globalState, dispatch] = useReducer(UserReducer, initialState);
  return (
    <UserContext.Provider value={{
      user: globalState.user,
      loading: globalState.loading,
      dispatch,
    }} >
      {children}
    </UserContext.Provider>
  );
};
export default function() {
  return useContext(UserContext);
}

行动：

export const SET_USER_DETAILS = (userDetails) => {
  return {
      type: 'SET_USER_DETAILS',
      payload: userDetails,
  };
};
export const SET_LOADING = (loadingState) => {
  return {
    type: 'SET_LOADING',
    payload: loadingState,
  };
};

减速器：

export const UserReducer = (state, action) => {
  switch (action.type) {
    case 'SET_USER_DETAILS':
      return {
        ...state,
        user: action.payload,
      };
    case 'SET_LOADING':
      return {
        ...state,
        loading: action.payload,
      };
    default:
      return state;
  }
};

主导航文件：

const Navigation = () => {
  const {user, dispatch, loading} = useAuth();
  console.log(user); // after successful fetch from api, I'm getting the desired user data.
  console.log(loading); //  PROBLEM => always false.
  useEffect(() => {
    checkUserLoggedInStatus(dispatch);
  }, [dispatch]);
  return loading ? (
    <LoadingScreen />
  ) : !user ? (
    <Stack.Navigator screenOptions={{headerShown: false}}>
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
      <Stack.Screen name="Verify" component={OTPVerificationScreen} />
    </Stack.Navigator>
  ) : (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Message" component={MessageScreen} />
    </Stack.Navigator>
  );
};

checkUserLoggedInStatus功能：

export const checkUserLoggedInStatus = (dispatch) => {
  dispatch(SET_LOADING(true)); // NOT WORKING/NOT CHANGING THE LOADING STATE
  AsyncStorage.getItem('token')
  .then((token) => {
    if (token) {
      fetch(`${API_URL}/user/`, {
        method: 'GET',
        headers: {
          ...
        },
      })
      .then(response => response.json())
      .then((data) => {
        if (data.type === 'success') {
          const details = data.data.user;
          dispatch(SET_USER_DETAILS(details)); // THIS IS WORKING FINE.
        }
      })
      .catch((error) => {
        console.log(error.message);
      });
    }
  })
  .catch((error) => {
    console.log(error.message);
  });
  dispatch(SET_LOADING(false)); // NOT WORKING/NOT CHANGING THE LOADING STATE
};

我不明白我做错了什么，因为我用SET_USER_DETAILS动作/减速器功能做了同样的事情，但我不知道loading状态出了什么问题。

摘要：无法根据UserContext的loading状态呈现LoadingScreen。

如果有人能帮助我，我将非常感激！

谢谢！

Answer 1

实现的问题是，在checkUserLoggedInStatus中，您在then和catch块之外将加载状态设置为false。由于您正在执行异步任务，并且需要在该异步任务完成后将加载设置为false，因此需要在then或catch中将加载设置为false。