Redux Toolkit中如何根据用户组织归属实现页面跳转逻辑？

1. 先检查Redux里organization的初始状态 #

如果你的Redux slice里organization初始值是{}（空对象），那!organization的判断根本不生效——因为空对象在JS里是真值。要么把初始状态改成null/undefined：

const initialState = {
  organization: null, // 别用 {}
  // 其他状态...
};

要是没法改初始状态，就改成判断对象是否为空：

const isOrgEmpty = Object.keys(organization).length === 0;
if (isOrgEmpty) {
  navigate('/auth/onboarding');
}

2. 避免路由无限循环 #

如果当前组件就是/admin/dashboard页面的一部分，那每次organization存在时执行navigate('/admin/dashboard')，会触发重复跳转，搞出无限循环。得先判断当前路径，只有路径不匹配时才跳转：

import { useLocation } from 'react-router-dom';

const { pathname } = useLocation();
const { organization } = useSelector((state) => state.organization);
const navigate = useNavigate();

useEffect(() => {
  if (!organization) {
    if (pathname !== '/auth/onboarding') {
      navigate('/auth/onboarding');
    }
  } else {
    if (pathname !== '/admin/dashboard') {
      navigate('/admin/dashboard');
    }
  }
}, [organization, pathname, navigate]);

3. 处理异步加载的情况 #

如果organization是通过接口异步获取的，初始状态是null/undefined，会先跳去引导页，等接口返回数据又跳回首页，导致页面闪一下。这时候要加个加载状态：

先在Redux slice里加loading状态：

const initialState = {
  organization: null,
  loading: true, // 初始标记为加载中
  error: null,
};

// 异步获取组织信息的thunk
export const fetchOrganization = createAsyncThunk(
  'organization/fetch',
  async () => {
    const res = await api.get('/organization');
    return res.data;
  }
);

const organizationSlice = createSlice({
  name: 'organization',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchOrganization.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchOrganization.fulfilled, (state, action) => {
        state.loading = false;
        state.organization = action.payload;
      })
      .addCase(fetchOrganization.rejected, (state) => {
        state.loading = false;
        state.error = '加载失败';
      });
  },
});

然后组件里等加载完成再判断跳转：

const { organization, loading } = useSelector((state) => state.organization);
const navigate = useNavigate();
const { pathname } = useLocation();

useEffect(() => {
  // 加载中啥也不做
  if (loading) return;

  if (!organization) {
    if (pathname !== '/auth/onboarding') {
      navigate('/auth/onboarding');
    }
  } else {
    if (pathname !== '/admin/dashboard') {
      navigate('/admin/dashboard');
    }
  }
}, [organization, loading, pathname, navigate]);

4. 确认useSelector的取值路径对不对 #

检查你的Redux store结构，确保state.organization确实是存组织信息的地方。比如如果slice是嵌套在user下面，就得写成state.user.organization，别取错路径拿到undefined。

内容的提问来源于stack exchange，提问作者karina