typescript - Typescript Redux - 使用 CreateSlice 输入 initialState

Question

我使用 CreateSlice 来创建我的减速器/动作，如下面的代码所示：

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

export interface ModalState {
  modalProps: React.ComponentProps<typeof Modal>;
  visible: boolean;
  modalContent: string;
}

export interface ModalInfos {
  modalProps: React.ComponentProps<typeof Modal>;
  modalContent: string;
}

const initialState = {
  modalProps: {},
  visible: false,
  modalContent: '',
};

const modal = createSlice({
  name: 'modal',
  initialState,
  reducers: {
    openModal(state, action: PayloadAction<ModalInfos>) {
      state.modalProps = action.payload.modalProps;
      state.modalContent = action.payload.modalContent;
      state.visible = true;
    },
    closeModal(state) {
      state.visible = false;
    },
  },
});

export const { openModal, closeModal } = modal.actions;

export default modal.reducer;

我没有输入我的初始状态（所以我没有使用我的 ModalState 接口），但是当我尝试这样做时：

const initialState: ModalState = {
  modalProps: {},
  visible: false,
  modalContent: '',
};

然后我在以下行收到一条奇怪的错误消息：

state.modalProps = action.payload.modalProps;

消息是：

    Type 'PropsWithChildren<ModalProps>' is not assignable to type 'WritableDraft<PropsWithChildren<ModalProps>>'.
  Types of property 'okButtonProps' are incompatible.
    Type 'Partial<{ href: string; target?: string | undefined; onClick?: ((event: MouseEvent<HTMLElement, MouseEvent>) => void) | undefined; } & BaseButtonProps & Pick<...> & { ...; } & Pick<...>> | undefined' is not assignable to type 'WritableDraft<Partial<{ href: string; target?: string | undefined; onClick?: ((event: MouseEvent<HTMLElement, MouseEvent>) => void) | undefined; } & BaseButtonProps & Pick<...> & { ...; } & Pick<...>>> | undefined'.
      Type 'Partial<{ href: string; target?: string | undefined; onClick?: ((event: MouseEvent<HTMLElement, MouseEvent>) => void) | undefined; } & BaseButtonProps & Pick<...> & { ...; } & Pick<...>>' is not assignable to type 'WritableDraft<Partial<{ href: string; target?: string | undefined; onClick?: ((event: MouseEvent<HTMLElement, MouseEvent>) => void) | undefined; } & BaseButtonProps & Pick<...> & { ...; } & Pick<...>>>'.
        Types of property 'defaultValue' are incompatible.
          Type 'string | number | readonly string[] | undefined' is not assignable to type 'string | number | string[] | undefined'.
            Type 'readonly string[]' is not assignable to type 'string | number | string[] | undefined'.
              The type 'readonly string[]' is 'readonly' and cannot be assigned to the mutable type 'string[]'.ts(2322)

可以不为我的 initalState 分配类型吗？如果不是，“state.modalProps”和“action.payload.modalProps”的类型在我看来是相同的，所以我不知道如何解决这个问题......

标签： typescriptreduxredux-toolkit

Answer 1

不，您必须为您的initialState. 这就是解释其他减速器createSlice的实际类型的方式。state你需要：

const initialState : ModalState = {
  modalProps: {},
  visible: false,
  modalContent: '',
};

在这里定义两个不同的接口并没有错。也就是说，如果您真的想避免必须两次定义两个公共字段，您可以这样做：

export interface ModalInfos {
  modalProps: React.ComponentProps<typeof Modal>;
  modalContent: string;
}
export interface ModalState extends ModalInfos {
  visible: boolean;
}

或者：

export interface ModalState {
  modalProps: React.ComponentProps<typeof Modal>;
  visible: boolean;
  modalContent: string;
}

export type ModalInfos = Omit<ModalState, 'visible'>;