javascript - 页面刷新时反应为空状态

Question

我创建了一个 auth reducer

import * as actionType from '../constants/actionTypes';

const authReducer = (state = { authData: null }, action) => {
  switch (action.type) {
    case actionType.AUTH:
      localStorage.setItem('profile', JSON.stringify({ ...action?.data }));
      return { ...state, authData: action.data, loading: false, errors: null };

    case actionType.SET_USER:
      return { ...state, authData: action.data, loading: false, errors: null };

    case actionType.LOGOUT:
      localStorage.clear();
      return { ...state, authData: null, loading: false, errors: null };
    default:
      return state;
  }
};

export default authReducer;

我为此创建了一组动作

import { AUTH,LOGOUT } from '../constants/actionTypes';
import * as api from '../api/index.js';

export const signin = (formData, router) => async (dispatch) => {
  try {

    console.log(formData);
    const { data } = await api.signIn(formData);

    dispatch({ type: AUTH, data });
    console.log(JSON.parse(localStorage.getItem('profile')));
    router.push('/');
  } catch (error) {
    console.log(error);
  }
};

export const signup = (formData, router) => async (dispatch) => {
  try {
    console.log(formData);
    const { data } = await api.signUp(formData);
    dispatch({ type: AUTH, data });

    router.push('/');
  } catch (error) {
    console.log(error);
  }
};


export const signout = (router) => async(dispatch) => {
  try {
    dispatch({ type: LOGOUT });
    localStorage.clear()
    router.push('/');
  } catch (error) {
    console.log(error);
  }
}

我的主要 app.js

export default function App() {

  const user = useSelector((state) => state.auth)
  const currUser = user?.authData?.result;
  const classes = useStyles();
  return (
    <Box sx={{ display: 'flex' }}>
      <PassPropsToNormalComponents currUser={currUser}>
        <Minidrawer/>
        <Navigation/>
      </PassPropsToNormalComponents>
      
      </Box>
  );
}

问题在于上述方法，我正在登录并且auth reducer 正在按预期填充用户数据并且应用程序工作正常但是当我刷新应用程序时，auth reducer 被重置为 null

这就是我尝试过的，我创建了一个额外的 reducer & action，将用户数据设置为 auth 并在 App.js 中调用它

新的 app.js

export default function App() {
  const dispatch = useDispatch();
  const location = useLocation();

  React.useEffect(() => {
    const localUserData = JSON.parse(localStorage.getItem('profile'))
    dispatch(setCurrentUser(localUserData))
    console.log(JSON.parse(localStorage.getItem('profile')));
  },[location])


  const user = useSelector((state) => state.auth)
  const currUser = user?.authData?.result;
  const classes = useStyles();
  return (
    <Box sx={{ display: 'flex' }}>
      <PassPropsToNormalComponents currUser={currUser}>
        <Minidrawer/>
        <Navigation/>
      </PassPropsToNormalComponents>
      
      </Box>
  );
}

新动作

export const setCurrentUser = (data) => async(dispatch) => {
  try {
    console.log("ssssssssss");
    dispatch({ type: SET_USER, payload:data });
  } catch (error) {
    console.log(error);
  }
}

新的额外减速器

case actionType.SET_USER:
      return { ...state, authData: action.data, loading: false, errors: null };

使用这种方法没有任何工作，登录本身不起作用，商店中的身份验证总是为空

标签： javascriptreactjsreduxflux