在 redux 工具包中将一个切片状态设置为另一个切片状态。 （本机反应）

Question

我的 redux 工具包商店中有两片：

根任务：

type RootMissionStoreType = {
  key: string;
  title: string;
  missions: Record<string, MissionStoreType>;
};

type RootMissionsSliceState = {
  rootMissions: Record<string, RootMissionStoreType>;
};

const initialState: RootMissionsSliceState = {
  rootMissions: {},
};

export const RootMissionsSlice = createSlice({
  name: SLICES_NAMES.rootMissions,
  initialState,
  reducers: {
    // some actions...
  },
});

和使命：

type MissionsSliceState = {
  missions: Record<string, MissionStoreType>;
  focusedMission: string | null;
};

const initialState: MissionsSliceState = {
  missions: {},
  focusedMission: null,
};

export const MissionsSlice = createSlice({
  name: SLICES_NAMES.missions,
  initialState,
  reducers: {
    // some actions...
  },
});

如您所见，我的 MissionSlice.mission 的类型与 rootMissionsSlice.rootMissions 中的值相同。

我希望能够通过调度操作或其他方式从missionsSlice.missions获取所有数据并将其设置在rootMissionsSlice.rootMissions [id]中（通过给定的id，就像在操作有效负载中一样..）

这就是我已经做过的事情：

在我的一个组件中，我有以下代码：

  const allMissions = useAppSelector(MissionsSelector);
  //...
    const handleBackPress = () => {
    dispatch(
      setRootMissionMissions({ key: route.params.key, missions: allMissions })
    );
  };

这个解决方案中的问题是，我需要为我的任务中的每个变化渲染我的组件。 我正在寻找一种更好的方法，这根本不会导致新的渲染。 谢谢！

Answer 1

我创建了一个像这样的全球行动：

const setMissionToRootMission =
  (key: string) => (dispatch: AppDispatch, getState: () => RootState) => {
    const state = getState();
    dispatch(
      setRootMissionMissions({ key, missions: state.missions.missions })
    );
  };

并在handle函数中调用它：

const handleBackPress = () => {
  dispatch(setMissionToRootMission(route.params.key));
};