xxxxxxxxxx
# react
import "./styles.css";
import React, { useReducer } from "react";
function redcuer(state, action){
return { count: state.count + 1 }
}
export default function App() {
const [state, dispatch] = useReducer(redcuer, { count: 0 })
function decrement(){
}
function increment(){
dispatch()
}
return (
<div className="App">
<button onClick={decrement}>-</button>
<span>{state.count}</span>
<button onClick={increment}>+</button>
</div>
);
}
xxxxxxxxxx
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
xxxxxxxxxx
import './App.css';
import { useState, useReducer } from 'react';
function reducer(state, action) {
switch (action.type) {
case 'increment':
return ({ state, count: state.count + 1 })
case 'decrement':
return ({ state, count: state.count - 1 })
case 'tgColor':
return ({ state, color: (!state.color) })
case 'handleInputChange':
return ({ state, name: action.payload })
}
}
function App() {
const [state, dispatch] = useReducer(reducer, { count: 0, color: false, name: "" })
// const [name, setName] = useState("")
// const [count, setCount] = useState(0)
// const [color, setColor] = useState(false);
const handleInputChange = (e) => {
dispatch({ type: "handleInputChange", payload: e.target.value })
}
const colorCode = "#b81f00";
return (
<div className="App">
<form action="">
<input type="text" onChange={handleInputChange} value={state.name} placeholder="Enter Name" />
</form>
<h3 style={state.color ? { color: "red" } : { color: "black" }}>{state.count}</h3>
<button className="btn" onClick={() => dispatch({ type: "increment" })}>+</button>
<button className="btn" onClick={() => dispatch({ type: "decrement" })}>-</button>
<button className="btn" onClick={() => dispatch({ type: "tgColor" })}>Color</button>
<h2 style={state.color ? { color: "red" } : { color: "black" }}>{state.name}</h2>
</div>
);
}
export default App;
xxxxxxxxxx
import React, { useReducer } from 'react';
// Reducer fonksiyonu
const reducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};
// Komponent
const Counter = () => {
// Başlangıç durumu ve reducer'ı kullanarak state'i tanımla
const initialState = { count: 0 };
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
</div>
);
};
export default Counter;
xxxxxxxxxx
import React from "react";
import { useReducer } from "react";
const initialState = {
count: 0,
};
type ReducerProps = {
state: any;
};
const reducer = (state: state, action) => {
switch (action.type) {
case "increment":
return { count: state.count + action.payload };
case "decrement":
return { count: state.count - action.payload };
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
Count : {state.count}
<button
onClick={() => {
dispatch({ type: "increment", payload: 1 });
}}
>
Increment ++
</button>
<button
onClick={() => {
dispatch({ type: "decrement", payload: 1 });
}}
>
Decrement --
</button>
</div>
);
};
export default Counter;
xxxxxxxxxx
import React, { useReducer } from 'react';
const reducer = (state, action) => {
// Logic to update the state based on the action type and payload
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
// Handle other action types here
default:
return state;
}
};
const initialState = { count: 0 };
const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
const increment = () => {
dispatch({ type: 'INCREMENT' });
};
const decrement = () => {
dispatch({ type: 'DECREMENT' });
};
return (
<div>
<p>Count: {state.count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
xxxxxxxxxx
import { useReducer } from 'react';
function reducer(state, action) {
// ...
}
function MyComponent() {
const [state, dispatch] = useReducer(reducer, { age: 42 });
// ...
xxxxxxxxxx
import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
function tasksReducer(tasks, action) {
switch (action.type) {
case 'added': {
return [tasks, {
id: action.id,
text: action.text,
done: false
}];
}
case 'changed': {
return tasks.map(t => {
if (t.id === action.task.id) {
return action.task;
} else {
return t;
}
});
}
case 'deleted': {
return tasks.filter(t => t.id !== action.id);
}
default: {
throw Error('Unknown action: ' + action.type);
}
}
}
export default function TaskApp() {
const [tasks, dispatch] = useReducer(
tasksReducer,
initialTasks
);
function handleAddTask(text) {
dispatch({
type: 'added',
id: nextId++,
text: text,
});
}
function handleChangeTask(task) {
dispatch({
type: 'changed',
task: task
});
}
function handleDeleteTask(taskId) {
dispatch({
type: 'deleted',
id: taskId
});
}
return (
<>
<h1>Prague itinerary</h1>
<AddTask
onAddTask={handleAddTask}
/>
<TaskList
tasks={tasks}
onChangeTask={handleChangeTask}
onDeleteTask={handleDeleteTask}
/>
</>
);
}
let nextId = 3;
const initialTasks = [
{ id: 0, text: 'Visit Kafka Museum', done: true },
{ id: 1, text: 'Watch a puppet show', done: false },
{ id: 2, text: 'Lennon Wall pic', done: false }
];
xxxxxxxxxx
function init(initialCount) { return {count: initialCount};}
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
case 'reset': return init(action.payload); default:
throw new Error();
}
}
function Counter({initialCount}) {
const [state, dispatch] = useReducer(reducer, initialCount, init); return (
<>
Count: {state.count}
<button
onClick={() => dispatch({type: 'reset', payload: initialCount})}> Reset
</button>
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
xxxxxxxxxx
const [state, dispatch] = useReducer(
reducer,
{count: initialCount} );
xxxxxxxxxx
function reducer(state, action) {
switch (action.type) {
case 'incremented_age': {
// ✅ Instead, return a new object
return {
state,
age: state.age + 1
};
}