Redux和减速器，如何在react应用程序中使用它们

Question

我有不同的产品包装，您可以从中选择。当您选择一个包时，将打开一个侧模式，您必须确认您所选择的包并进行付款。

我已经做了一个减速机来帮助存储数据，一旦你选择了一个选项。

我感到困惑的是，你是如何实际使用减速机在侧屏幕上显示所选的包的？

我的代码如下：

减速器：

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>
    );
  };

Answer 1

如果您的redux还原器已经正确设置，则可以通过在{}语句中包围您的值来轻松地访问数据。这样可以运行与对象、映射和三元条件有关的javascript。以下是修改后的组件代码：

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">                
                {/* update this */}
                <p>{packageOption.name}</p>
                <p>{packageOption.billingCycle}</p>
              </div>
              <div className="flex justify-between font-normal text-sm my-3">
                <p>Amount</p>
                {/* update this */}
                <p>{packageOption.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>
  );
};

这是经过修改的还原器代码，以确保您在来自redux的组件中显示的所有支持：

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

export interface PackageState {
  name: string; 
  price: number;
  billingCycle: string;
  packageOption: string;
}

const initialState: PackageState = {
  name: "Super"
  price: 10,
  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;

如果这不起作用，请确保您的redux存储已正确初始化。