2025-09-19 createSlice,createAsyncThunk用法

一、 createAsyncThunk()

import { createAsyncThunk } from "@reduxjs/toolkit";

export const getCountryList = createAsyncThunk(
  'ui/getCountryList',
  async () => {
    const res = await fetch('/api/countries');
    return await res.json();
  }
);

二、createSlice()

// 1. 初始状态
const initialState = { value: 0 };

// 2. 创建 slice
const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
  },
  extraReducers: (builder) => {
    builder
      .addCase(getCountryList.pending, (state) => {
        console.log('请求开始');
      })
      .addCase(getCountryList.fulfilled, (state, action) => {
        state.countryList = action.payload;
      })
      .addCase(getCountryList.rejected, (state, action) => {
        console.error('请求失败', action.error);
      });
  },
});

// 3. 导出 action 和 reducer
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

createSlice常用参数有4个：

1.name

slice的命名

2.initialState

变量的初始值

3.reducers

定义编辑变量的方法

4.extraReducers

因为这些 reducer 不是 slice 自己定义的 action，而是“额外的、外部的” → 所以叫 extraReducers。

通常用于异步请求（createAsyncThunk）

这个异步 thunk 的三个生命周期：
pending：请求开始
fulfilled：请求成功 → 更新 state
rejected：请求失败 → 错误处理

三、configureStore()

const reducers = {
  auth,
};

let store = configureStore({
  reducer: reducers,
});
export default store;

四、app.tsx中使用Provider包裹

export default function App({ Component, pageProps }: AppProps) {


  const store = useStore(pageProps.initialReduxState);

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#3ACDD7',
          colorError: '#EE5253',
          fontFamily: 'Apercu, sans-serif',
        },
      }}
      renderEmpty={() => <TableEmptyState />}
    >
      <Provider store={store}>
        <GlobalContextProvider>
          <Component {...pageProps} />
        </GlobalContextProvider>
      </Provider>
    </ConfigProvider>
  );
}