技术文献

React:Redux ToolKit (ts）

2026-10-04

Redux ToolKit使用四部曲：㈠定义切片（数据和方法）；㈡汇总整合到一个切片；㈢根组件注入数据；㈣子组件调用数据和方法

㈠定义切片（数据和方法）；

定义涉及3个内容：❶切片名称；❷切片数据；❸操作数据的方法；

/src/state/counter/counterSlice.ts

import {createAsyncThunk, createSlice, type PayloadAction} from "@reduxjs/toolkit";
interface CounterState {
   value: number;
}
const initialState: CounterState = {
   value:0
}

export const incrementAsync=createAsyncThunk(
   "counter/incrementAsync",
   async(amount:number)=>{
       await new Promise((resolve)=>setTimeout(resolve,1000));
       return amount;
   }
)
const counterSlice =createSlice({
   name:'counter',
   initialState,
   reducers:{
       increment: (state) => {
           state.value +=1;
       },
       decrement: (state) => {
           state.value -= 1;
       },
       incrementByAmount: (state,action:PayloadAction<number>) => {
           state.value=action.payload;
       }
   },
   extraReducers:(builder)=>{
       builder
           .addCase(incrementAsync.pending,()=>{
               console.log("incrementAsync.pending");
           })
           .addCase(incrementAsync.fulfilled,
               (state,action:PayloadAction<number>)=>{
               state.value+=action.payload;
           })
   }
})
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

㈡将切片合并汇总到一个入口文件，关键词是configureStore，reducer

※在这个层面，无需导入切片的actions（调用方放负责自行导入actions后，执行操作），只需要导入各个切片的Reducers，形成一个总的reducer，本案例只汇总一个reduce。

/src/state/store.ts

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counter/counterSlice";
export const store = configureStore({
   reducer: {
       counter: counterReducer,
   },
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

㈢顶层根组件中注入入口文件（提供数据store），关键词是：Provider

/src/main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import {Provider} from "react-redux";
import {store} from "./state/store.ts";
createRoot(document.getElementById('root')!).render(
 <StrictMode>
     <Provider store={store}>
   <App />
     </Provider>
 </StrictMode>,
)

㈣每个组件中，使用数据，引用数据（useSelector）和方法（useDispatch）

/src/Components/Count.tsx

import { useDispatch, useSelector } from "react-redux";
import type {AppDispatch, RootState} from "../state/store";
import {
   decrement,
   increment,
   incrementByAmount,
   incrementAsync,
} from "../state/counter/counterSlice";
const Counter = () => {
   const count = useSelector((state: RootState) => state.counter.value);
   const dispatch = useDispatch<AppDispatch>();
   return (
       <div>
           <h2>{count}</h2>
           <div>
               <button onClick={() => dispatch(incrementAsync(10))}>incrementAsync+10</button>
               <button onClick={() => dispatch(decrement())}>decrement</button>
               <button onClick={() => dispatch(increment())}>increment</button>
               <button onClick={() => dispatch(incrementByAmount(100))}>incrementByAmount+100</button>
           </div>
       </div>
   );
};
export default Counter;

 

 

 

 

合辑