Atdhe/redox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redox2

Browse Source
This commit is contained in:
Atdhe
2025-06-05 19:48:46 +02:00
parent e29ff6a755
commit a69b96eb22
8 changed files with 92 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lab07/index.html
View File

@ -1,10 +1,8 @@
<!doctype html>
<html lang="en">
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<title>Preis Checker</title>
</head>
<body>
<div id="root"></div>

32
lab07/src/App.jsx
View File

@ -1,16 +1,24 @@
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import MyInput from './MyInput';
import MyOutput from './MyOutput';
import React from "react";
import Output from "./MyOutput";
import MyInput from "./MyInput";
import Button from "./Button";
import { useIsPriceToHigh } from "./useIsPriceToHigh";
export default function App() {
function App() {
const [isPriceToHigh] = useIsPriceToHigh(1000); // 1000€ Limit
return (
<Provider store={store}>
<div style={{ padding: '20px' }}>
<MyInput />
<MyOutput />
</div>
</Provider>
<div className="App">
<Button text="Grafikkarte" money={800} />
<br />
<Button text="Prozessor" money={500} />
<br />
<Button text="Mainboard" money={200} />
<br />
<Button text="Arbeitsspeicher" money={100} />
<br />
<Output isPriceToHigh={isPriceToHigh} />
</div>
);
}
export default App;

25
lab07/src/Button.jsx Normal file
View File

@ -0,0 +1,25 @@
import React, { useState } from "react";
// import "./Button.css"; // optional
import { useDispatch } from "react-redux";
export default function Button({ money, text }) {
const [isAddMoney, setIsAddMoney] = useState(true);
const dispatch = useDispatch();
const handleClick = () => {
if (isAddMoney) {
dispatch({ type: "addPartCost", money: money });
} else {
dispatch({ type: "removePartCost", money: money });
}
setIsAddMoney(!isAddMoney);
};
return (
<div>
<button className="button" onClick={handleClick}>
{text}
</button>
</div>
);
}

23
lab07/src/MyOutput.jsx
View File

@ -1,18 +1,15 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { useSelector } from "react-redux";
//import "./Output.css";
export default function MyOutput() {
const list = useSelector(state => state.list);
export default function Output(props) {
const cost = useSelector((state) => state.cost);
return (
<div style={{
backgroundColor: 'khaki',
marginTop: '10px',
padding: '20px',
fontSize: '18px',
fontWeight: '500'
}}>
{list.join(' ')}
</div>
<>
<div className="show">{`Preis: ${cost}`}</div>
<div className="show">
{props.isPriceToHigh ? "Kostet zu viel Geld!" : "Ist im Rahmen"}
</div>
</>
);
}

7
lab07/src/main.jsx
View File

@ -1,9 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
//import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Provider store={store}>
<App />
</React.StrictMode>
</Provider>
);

21
lab07/src/reducer.js
View File

@ -1,16 +1,21 @@
const initialState = {
input: '',
list: []
cost: 0,
};
export default function appReducer(state = initialState, action) {
switch (action.type) {
case 'input/update':
return { ...state, input: action.payload };
case 'input/clear':
return { ...state, input: '' };
case 'list/add':
return { ...state, list: [...state.list, action.payload] };
case "addPartCost": {
return {
...state,
cost: state.cost + action.money,
};
}
case "removePartCost": {
return {
...state,
cost: state.cost - action.money,
};
}
default:
return state;
}

8
lab07/src/store.js
View File

@ -1,8 +1,6 @@
import { configureStore } from '@reduxjs/toolkit';
import reducer from './reducer';
import appReducer from "./reducer";
import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({
reducer: reducer
});
const store = configureStore({ reducer: appReducer });
export default store;

13
lab07/src/useIsPriceToHigh.jsx Normal file
View File

@ -0,0 +1,13 @@
import { useState, useEffect } from "react";
import { useSelector } from "react-redux";
export function useIsPriceToHigh(priceBorder) {
const currentConfigCost = useSelector((state) => state.cost);
const [isPriceToHigh, setIsPriceToHigh] = useState(false);
useEffect(() => {
setIsPriceToHigh(currentConfigCost > priceBorder);
}, [currentConfigCost, priceBorder]);
return [isPriceToHigh];
}