在 React 项目中，为了实现可预测的状态管理和更高效的调试能力，必须接入 Redux。推荐使用 @reduxjs/toolkit 初始化 store、定义 slice，并结合 react-redux 提供的 Provider 与 Hook 完成整体集成。
在 Cursor 编辑器中新建 React 项目后，如果希望应用状态管理更清晰、可追踪，并具备完善的调试体验，就需要接入 Redux。虽然 Cursor 不会改变 React 官方生态的集成方式，但它具备 AI 补全、文件跳转和代码导航等能力，能明显提升 Redux 配置效率。前提是项目路径、文件结构以及 API 调用方式都要符合当前主流 React 工具链规范。
创建项目并安装核心依赖
打开 Cursor 终端（Cmd/Ctrl+J），执行以下命令初始化 React 项目并安装 Redux 相关依赖：
npx create-react-app my-app --template typescript → cd my-app → npm install react-redux @reduxjs/toolkit
注意：不要继续使用旧版 redux，也不要单独安装 redux-thunk——【@reduxjs/toolkit 已默认内置 thunk 中间件和 DevTools 支持】，如果手动重复引入，反而容易造成依赖冲突或版本不兼容问题。
构建标准Store结构
在 src 目录下新建 store 文件夹，并创建 index.ts：
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
export const store = configureStore({
reducer: {
counter: counterReducer,
}
});
export type RootState = ReturnType
export type AppDispatch = typeof store.dispatch;
这里必须使用 configureStore，而不是 createStore——【旧版 createStore 无法良好兼容 RTK 的自动 DevTools 注入以及基于 immer 的不可变更新能力】，否则在后续 Redux 调试过程中，DevTools 可能无法正确捕获和追踪 action。
将Store注入React应用根节点
修改 src/main.tsx（或 index.tsx）：
先引入需要使用的模块：React、ReactDOM、react-redux 提供的 Provider、项目中的 store，以及 App 组件。然后通过 ReactDOM.createRoot(document.getElementById('root')!).render( 创建应用入口，再使用
要确保 Provider 包裹的是完整的
定义Slice并使用Hook读写状态
在 src/features/counter 目录下创建 counterSlice.ts：
import { createSlice } from '@reduxjs/toolkit';
export const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: state => { state.value += 1 },
decrement: state => { state.value -= 1 },
incrementByAmount: (state, action) => { state.value += action.payload }
}
});
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
在 App.tsx 中使用：
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './features/counter/counterSlice';
function App() {
const count = useSelector((state: RootState) => state.counter.value);
const dispatch = useDispatch();
return (
{count}
);
}
export default App;
useSelector 必须结合 RootState 类型使用，否则在 TypeScript 项目中很容易出现“cannot find name RootState”或状态类型推断不准确的问题；而 dispatch 在调用 action creator 时通常不需要手动解构 action，RTK 已经对 payload 类型和 action 创建流程做了良好封装，更适合 React + Redux 的现代开发方式。