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

30
lab07/src/App.jsx
View File

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

21
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() { export default function Output(props) {
const list = useSelector(state => state.list); const cost = useSelector((state) => state.cost);
return ( return (
<div style={{ <>
backgroundColor: 'khaki', <div className="show">{`Preis: ${cost}`}</div>
marginTop: '10px', <div className="show">
padding: '20px', {props.isPriceToHigh ? "Kostet zu viel Geld!" : "Ist im Rahmen"}
fontSize: '18px',
fontWeight: '500'
}}>
{list.join(' ')}
</div> </div>
</>
); );
} }

7
lab07/src/main.jsx
View File

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

21
lab07/src/reducer.js
View File

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

8
lab07/src/store.js
View File

@ -1,8 +1,6 @@
import { configureStore } from '@reduxjs/toolkit'; import appReducer from "./reducer";
import reducer from './reducer'; import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({ const store = configureStore({ reducer: appReducer });
reducer: reducer
});
export default store; 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];
}