我有不同的包为一个产品，你可以选择。当你选择一个包一方模态打开，你必须确认你选择的包，并作出付款。
我已经做了一个还原器，以帮助存储数据，一旦你选择一个选项。
我感到困惑的是，你实际上是如何使用减速器在侧屏中显示所选的包的？
我的代码如下：
异径管：

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

export interface PackageState {
  billingCycle: string;
  packageOption: string;
}

const initialState: PackageState = {
  billingCycle: 'Monthly',
  packageOption: 'Free',
};

export const PackageSlice = createSlice({
  name: 'packageSlice',
  initialState,
  reducers: {
    setBillingCycle: (state, action: PayloadAction<string>) => {
      state.billingCycle = action.payload;
    },
    setPackage: (state, action: PayloadAction<string>) => {
      state.packageOption = action.payload;
    },
  },
});

export const { setBillingCycle, setPackage } = PackageSlice.actions;
export const packageSelector = (state: RootState) => state.packageReducer;

export default PackageSlice.reducer;

操作：

import { AppDispatch, AppThunk } from '../store';
import { setBillingCycle, setPackage } from './packages.reducer';

export const setBillingCycleAction =
  (billingCycle: string): AppThunk =>
  (dispatch: AppDispatch) => {
    return dispatch(setBillingCycle(billingCycle));
  };

  export const setPackageAction =
      (packageOption: string): AppThunk =>
      (dispatch: AppDispatch) => {
        return dispatch(setPackage(packageOption));
      };

我希望数据根据您选择的包进行更改的侧模式：

import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { packageSelector } from '../../../reducers/packages-reducer/packages.reducer';

export const ConfirmPackagesscreen: React.FC = () => {
  const [openModal, setOpen] = useState(true);
  const history = useHistory();
  const packageOption = useSelector(packageSelector);

  const handleClose = () => {
    setOpen(false);
    history.push('/');
  };

  return (
    <RecaptchaContainer>
      <Modal
        open={openModal}
        onClose={handleClose}
        disableScrollLock
      >
        <Box sx={boxStyle}>
          <div className="form-container mt-11">
            <div className="mt-2 mx-9 font-Poppins">
              <div>
                <p className="font-semibold text-base text-black">Package Deatails</p>
              </div>
              <div className="flex justify-between font-normal text-sm my-3">
                <p>[package name]</p>
                <p>[billing cycle. yearly or monthly]</p>
              </div>
              <div className="flex justify-between font-normal text-sm my-3">
                <p>Amount</p>
                <p>[price]</p>
              </div>
              <Divider className="bg-dividerColor" />
            </div>
            <div className="flex justify-center w-65 mt-12">
              <button
                type="button"
                onClick={undefined}
                className="font-nunito font-bold edit-user-button mt-4 py-2.5 px-16"
              >
                Make Payment
              </button>
            </div>
          </div>
        </Box>
      </Modal>
    </RecaptchaContainer>
  );
};

不同封装选项的示例：

const MonthCards = () => {
    return (
        <Card className="packagesCard shadow-customShadow w-80">
          <CardContent>
            <div>
              <p className="text-2xl font-Poppins">Free</p>

            </div>
            <div className="my-3 flex">
              <p className="text-lg">Free</p>
              <p className="text-3xl ml-16">R0.00</p>
            </div>
            <Divider className="bg-dividerColor" orientation="horizontal" />
            <div className="flex justify-center my-3">
              <Button
                className="bg-mainBlue w-64 text-white hover:bg-blue-800 text-base"
                onClick={handleRegister}
              >
                Get Started
              </Button>
            </div>
          </CardContent>
        </Card>
        <Card className="packagesCard shadow-customShadow w-80">
          <CardContent>
            <div>
              <p className="text-2xl font-Poppins">Pro</p>
              <Divider className="bg-dividerColor" orientation="horizontal" />
            </div>
            <div className="my-3">
              <p className="text-3xl ml-20">
                R39.99 &nbsp;<span className="text-sm font-light">incl. VAT</span>
              </p>
            </div>
            <Divider className="bg-dividerColor" orientation="horizontal" />
            <div>
              <div className="flex justify-center my-3">
                <Button
                  className="bg-mainBlue w-64 text-white hover:bg-blue-800 text-base"
                  onClick={handleRegister}
                >
                  Try it free
                </Button>
              </div>
              <div className="flex justify-center">
                <Button
                  className="text-mainBlue hover:bg-blue-800 hover:bg-opacity-20"
                  onClick={handleRegister}
                >
                  Purchase Now
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="packagesCard shadow-customShadow w-80">
          <CardContent>
            <div>
              <p className="text-2xl font-Poppins">Team</p>
              <Divider className="bg-dividerColor" orientation="horizontal" />
            </div>
            <div className=" my-3">
              <p className="text-3xl ml-20">
                R44.99 &nbsp;<span className="text-sm font-light">incl. VAT</span>
              </p>
            </div>
            <Divider className="bg-dividerColor" orientation="horizontal" />
            <div>
              <div className="flex justify-center my-3">
                <Button
                  className="bg-mainBlue w-64 text-white hover:bg-blue-800 text-base"
                  onClick={handleRegister}
                >
                  Try it free
                </Button>
              </div>
              <div className="flex justify-center">
                <Button
                  className="text-mainBlue hover:bg-blue-800 hover:bg-opacity-20"
                  onClick={handleRegister}
                >
                  Purchase Now
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  };