React context api useReducer 状态不变

Question

我有一个 Auth 屏幕和一个 HomeScreen，为了管理我正在使用的状态 API 我有 2 个状态 -> 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 action/reducer 函数做同样的事情，但我不知道 loading 状态有什么问题。

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

如果有人能帮助我，我将不胜感激！

谢谢！

Answer 1

您实施的问题在于，在 checkUserLoggedInStatus 中，您在 then 和 catch 块之外将加载状态设置为 false。由于你正在执行异步任务，需要在这个异步任务完成后将loading设置为false，所以你需要在then或catch中将loading设置为false。

React context api useReducer 状态不变

React context api with useReducer state not changing

reactjs

react-native

react-hooks

react-context