我有不同的包为一个产品,你可以选择。当你选择一个包一方模态打开,你必须确认你选择的包,并作出付款。
我已经做了一个还原器,以帮助存储数据,一旦你选择一个选项。
我感到困惑的是,你实际上是如何使用减速器在侧屏中显示所选的包的?
我的代码如下:
异径管:
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 <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 <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>
);
};
1条答案
按热度按时间ufj5ltwl1#
如果你的redux reducer已经设置好了,你可以通过在return语句中用
{}
括住你的值来轻松地访问数据。这样做可以让你运行与对象、Map和三元条件相关的javascript。下面是修改后的组件代码:这是修改过的reducer代码,以确保您在组件中显示的所有道具都来自redux:
如果这不起作用,请确保检查redux存储是否正确初始化。