React/NextJS+Redux+TypeScript配置优化及跨组件访问方法咨询

一、更简洁的Redux实现方式 #

你当前使用的是Redux传统写法，冗余代码多是因为手动处理了reducer、action类型、connect映射等环节。现在官方推荐Redux Toolkit（RTK） + React-Redux Hooks组合，能大幅削减样板代码，同时完美支持TypeScript类型推导。

具体优化步骤： #

1. 安装依赖

npm install @reduxjs/toolkit react-redux

2. 用RTK重构Store
   RTK的createSlice会自动生成action creators、处理不可变更新（基于Immer），还能自动推导类型：

store/slices/dataSlice.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

// 定义你的数据类型
interface IData1 { /* 你的Data1结构 */ }
interface IData2 { /* 你的Data2结构 */ }

// 定义slice的状态类型
interface DataState {
  data1: IData1[];
  data2: IData2;
}

// 初始状态
const initialState: DataState = {
  data1: [],
  data2: {} as IData2 // 根据你的实际初始值调整
};

// 创建slice，包含状态和所有action逻辑
const dataSlice = createSlice({
  name: 'data',
  initialState,
  reducers: {
    // 每个reducer直接修改state，Immer自动处理不可变更新
    function1: (state, action: PayloadAction<IData1[]>) => {
      state.data1 = action.payload;
    },
    function2: (state, action: PayloadAction<IData2>) => {
      state.data2 = action.payload;
    },
    function3: (state) => {
      // 无参数的action逻辑
    },
    function4: (state, action: PayloadAction</* 你的参数类型 */>) => {
      // 带参数的逻辑
    },
    function5: (state) => {
      // 其他逻辑
    }
  }
});

// 导出自动生成的action creators
export const { function1, function2, function3, function4, function5 } = dataSlice.actions;

// 导出reducer给store使用
export default dataSlice.reducer;

store/store.ts

import { configureStore } from '@reduxjs/toolkit';
import dataReducer from './slices/dataSlice';

// 创建store，RTK自动配置中间件、合并reducers
export const store = configureStore({
  reducer: {
    data: dataReducer // 这里的key对应state中的命名空间
  }
});

// 导出全局状态类型和dispatch类型，供组件使用
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

3. 组件中用Hooks替代Connect
   不需要再写mapStateToProps、connect，也不需要声明大量Props接口，直接用useSelector和useDispatch：

index.tsx

import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from '@store/store';
import { function1, function2, function3, function4, function5 } from '@store/slices/dataSlice';

const Home: NextPage = () => {
  // 直接获取状态，TypeScript自动推导类型
  const data1 = useSelector((state: RootState) => state.data.data1);
  const data2 = useSelector((state: RootState) => state.data.data2);
  
  // 获取带类型的dispatch，避免action参数类型错误
  const dispatch = useDispatch<AppDispatch>();

  // 使用action的示例
  const triggerFunction1 = () => {
    dispatch(function1([/* 你的IData1类型数据 */]));
  };

  return (
    <div>
      {/* 直接传递dispatch调用action */}
      <SomeComponent fct5={() => dispatch(function5())} />
    </div>
  );
};

export default Home;

二、其他组件使用Redux的正确方式 #

不需要为每个组件写connect，也不需要通过顶层组件传递Props。直接在需要的组件中使用useSelector获取状态、useDispatch调用action即可：

• 避免了props drilling（层层传递props）的问题
• 每个组件独立管理自己需要的Redux依赖，代码更清晰
• 类型自动推导，不需要手动声明Props接口

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