Redux中Clients模块数据无法从slice.ts传递至List.tsx求助

问题现象 #

• 新增Clients模块后，slice.ts中调用接口能成功获取数据并dispatch，但List.tsx通过useSelector获取的state.clients始终为初始值
• List组件的日志先执行，slice中的接口请求日志后执行，而正常的ProductsLicenses/UsersLicenses模块是slice日志先执行、组件日志随状态更新后执行

项目结构 #

├── Clients  # 需创建的页面
│   ├── components
│   │   ├── Item.tsx
│   │   └── List.tsx
│   ├── index.tsx
│   ├── slice.ts
│   └── styles.scss
├── index.tsx
├── ProductsLicenses
│   ├── components
│   │   ├── Item.tsx
│   │   ├── List.tsx
│   │   └── ProductLicenseAddModal.tsx
│   ├── index.tsx
│   ├── slice.ts
│   └── styles.scss
├── store.ts
└── UsersLicenses
    ├── components
    │   ├── ClientAddModal.tsx
    │   ├── ClientComputersListModal.tsx
    │   ├── ClientEditModal.tsx
    │   ├── Item.tsx
    │   └── List.tsx
    ├── index.tsx
    ├── slice.ts
    └── styles.scss

关键代码 #

Clients/slice.ts #

import { createSlice, createAction, PayloadAction } from '@reduxjs/toolkit';
import { getClientsList, Client } from "@tms/api";


interface InitialState {
    isFetching: boolean;
    isFetchingError: boolean;
    byId: Record<number, any>;
    ids: Array<number>;
}

const initialState: InitialState = {
    isFetching: true,
    isFetchingError: false,
    byId: {},
    ids: [],
};


const clients = createSlice({
    name: 'clients',
    initialState: initialState,
    reducers: {
        fetchingPending: (state) => ({
            ...state,
            isFetching: true,
        }),
        fetchingSuccess: (state, { payload }) => ({
            ...state,
            isFetching: false,
            byId: payload.byId,
            ids: payload.ids,
        }),
        fetchingError: (state) => ({
            ...state,
            isFetching: false,
            isFetchingError: true,
        }),
    }
});

export const loadClients = () => (dispatch) => {
    dispatch(clients.actions.fetchingPending());
    getClientsList().then(json => {
        const ids = json.items.map(item => item.id);
        const byId = json.items.reduce((obj, item) => ({
            ...obj,
            [item.id]: item,
        }), {});
        console.log('ids', ids);  // 能正常输出数据
        dispatch(clients.actions.fetchingSuccess({ byId, ids }));
    }).catch(err => {
        dispatch(clients.actions.fetchingError());
    });
}


export default clients;

Clients/components/List.tsx #

import * as React from 'react';
import { useSelector } from 'react-redux';

import { ListLoading } from '@tms/shared/components/ListStates';
import ClientItem, { ClientItemEmpty } from './Item';


const ClientsList = (props) => {
    const isFetching = useSelector((state: any) => state.clients.isFetching);
    const clientIds = useSelector((state: any) => state.clients.ids);
    console.log('isFetching', isFetching);  // 输出undefined
    console.log('clientIds', clientIds); // 输出空数组
    // 后续代码省略
}

问题原因分析 #

1. 核心原因：Clients slice未注册到Redux Store
   正常模块的slice已在store.ts中配置了reducer，但新增的Clients模块slice大概率未添加，导致Redux未维护state.clients状态分支，useSelector自然无法获取到更新后的状态。
   同时，组件日志先执行、slice日志后执行的现象，要么是loadClients调用时机晚于组件渲染，要么是因为slice未注册，dispatch的action根本没触发状态更新，组件始终拿初始值。

2. 调用时机可能存在问题
   如果loadClients未在组件初始化阶段正确触发（比如useEffect依赖项错误、未绑定触发逻辑），会导致组件先渲染拿初始值，之后接口请求完成但状态无法更新。

解决方法 #

步骤1：注册Clients slice到Store #

打开store.ts，参考已有模块的注册方式添加Clients slice：

// store.ts示例代码
import { configureStore } from '@reduxjs/toolkit';
import productsLicenses from './ProductsLicenses/slice';
import usersLicenses from './UsersLicenses/slice';
import clients from './Clients/slice'; // 导入Clients slice

export const store = configureStore({
  reducer: {
    productsLicenses,
    usersLicenses,
    clients, // 新增该行，注册clients reducer
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

步骤2：确保loadClients调用时机正确 #

在Clients入口组件（Clients/index.tsx）中，用useDispatch和useEffect触发数据加载：

// Clients/index.tsx示例代码
import * as React from 'react';
import { useDispatch } from 'react-redux';
import { loadClients } from './slice';
import ClientsList from './components/List';

const ClientsPage = () => {
  const dispatch = useDispatch();

  React.useEffect(() => {
    dispatch(loadClients());
  }, [dispatch]); // 依赖dispatch确保组件挂载时只执行一次

  return <ClientsList />;
};

export default ClientsPage;

步骤3：优化类型定义（可选） #

避免使用any类型，导入RootState约束useSelector的state类型，提升代码健壮性：

// Clients/components/List.tsx修改后
import * as React from 'react';
import { useSelector } from 'react-redux';
import { RootState } from '../../store'; // 导入RootState

import { ListLoading } from '@tms/shared/components/ListStates';
import ClientItem, { ClientItemEmpty } from './Item';


const ClientsList = (props) => {
    const isFetching = useSelector((state: RootState) => state.clients.isFetching);
    const clientIds = useSelector((state: RootState) => state.clients.ids);
    console.log('isFetching', isFetching);
    console.log('clientIds', clientIds);
    // 后续代码省略
}

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