React TypeScript中如何用Redux同Store内值初始化carDataMap

错误原因 #

你在initializeCarDataMap函数里调用了useSelector——这是React Hook，必须严格遵循Hook规则：只能在函数组件或自定义Hook的顶层执行。而你是在Redux初始化initialState时直接调用这个函数，完全脱离了React组件的执行上下文，所以触发了Invalid hook call错误。

正确解决方案 #

方案1：初始化阶段直接基于已有selection计算

既然initialState里的selection是通过getSelection()预先获取的，完全不需要用Hook，直接把selection作为参数传给初始化函数即可：

1. 修改初始化函数，接收cars参数：

export type CarDataMapType = { [car: string]: Data };

export function initializeCarDataMap(cars: string[]): CarDataMapType {
    const initialMap: CarDataMapType = {};
    const initialData = createDefaultData();
    for (const car of cars) {
        initialMap[car] = initialData;
    }
    return initialMap;
}

2. 在Redux初始化时，先获取初始selection，再用它生成carDataMap：

// redux store 部分
const initialSelection = getSelection();
const initialState: SelectState = {
    selection: initialSelection,
    carDataMap: initializeCarDataMap(initialSelection.selection.cars),
};

方案2：同步更新动态变化的selection

如果后续selection会被修改（比如用户切换选中的车辆），需要同步更新carDataMap，可以在更新selection的reducer逻辑里同步处理：

1. 先抽离复用的更新逻辑：

function getCarDataMapFromCars(cars: string[]): CarDataMapType {
    const map: CarDataMapType = {};
    const initialData = createDefaultData();
    cars.forEach(car => {
        map[car] = initialData;
    });
    return map;
}

2. 初始化和reducer里都使用这个函数：

// 初始化
const initialSelection = getSelection();
const initialState: SelectState = {
    selection: initialSelection,
    carDataMap: getCarDataMapFromCars(initialSelection.selection.cars),
};

// slice定义
const store = createSlice({
    name: 'select',
    initialState,
    reducers: {
        setSelection: (state, action: PayloadAction<Selection>) => {
            state.selection = action.payload;
            // 同步更新carDataMap
            state.carDataMap = getCarDataMapFromCars(action.payload.cars);
        },
        setCarDataMap: (state, action: PayloadAction<{ car: string; data: Data }>) => {
            state.carDataMap[action.payload.car] = action.payload.data;
        },
    },
});

关键注意点 #

永远不要在非React组件/自定义Hook的环境下调用React Hook（比如Redux reducer、普通工具函数、全局初始化代码里），Hook的设计就是绑定React组件的生命周期和上下文的，脱离这个场景必然报错。

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