使用Redux RTK实现数据获取及状态监听问题求助

下面是你代码中的核心问题及对应修复方案：

1. Store 配置错误 #

你在configureStore里错误地将addPlayer这个action当作reducer传入，正确做法是传入slice导出的根reducer。

修复后的store代码：

//@ts-nocheck
import { configureStore } from '@reduxjs/toolkit'
import { playerSlice } from './playerSlice'

export const store = configureStore({
  reducer: {
    players: playerSlice.reducer, // 使用slice的reducer而非单个action
  },
})

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

2. Dispatch 调用错误 #

你直接dispatch了action creator本身，没有调用它（如果是异步action或带payload的同步action，必须调用后再dispatch）。

场景A：触发API获取玩家数据 #

如果按钮是用来加载接口数据，修改组件代码：

import { getPlayers } from './playerSlice';

const NextPage = () => {
  const dispatch = useDispatch();
  return (
      <ButtonNext
        onClick={() => {
          dispatch(getPlayers()); // 调用异步action creator并dispatch
        }}
        text="< Back"
      />
  );
};

export default NextPage;

场景B：手动添加单个玩家 #

如果按钮是用来新增玩家，需要给addPlayer传入符合IPlayerProps的payload：

import { addPlayer } from './playerSlice';

const NextPage = () => {
  const dispatch = useDispatch();
  return (
      <ButtonNext
        onClick={() => {
          // 传入符合类型定义的玩家数据
          dispatch(addPlayer({ id: '1', name: 'New Player' }));
        }}
        text="< Back"
      />
  );
};

export default NextPage;

3. 选择器（Selector）错误 #

你的selectPlayers选择器路径错误，实际玩家数组存在state.players.players节点下。

修复后的选择器：

export const selectPlayers = (state: RootState) => state.players.players;
// 额外添加状态选择器，方便监听加载状态
export const selectPlayersStatus = (state: RootState) => state.players.status;

额外优化：ExtraReducers 推荐写法 #

虽然旧的对象写法可运行，但RTK官方更推荐builder回调写法，类型更安全：

const playerSlice = createSlice({
  name: 'players',
  initialState,
  reducers: {
    addPlayer: (state, action: PayloadAction<IPlayerProps>) => {
      console.log('done');
      state.players.push(action.payload);
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(getPlayers.pending, (state) => {
        console.log('loading');
        state.status = 'loading';
      })
      .addCase(getPlayers.fulfilled, (state, action) => {
        console.log('succeeded');
        state.status = 'succeeded';
        state.players = state.players.concat(action.payload);
      });
  }
});

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