В этом задании вы потренируетесь выносить логику работы с состоянием из компонентов в отдельную функцию reducer c помощью хука useReducer. Перед вами небольшое todo-приложение. В нём можно д

Вопрос пользователя:

В этом задании вы потренируетесь выносить логику работы с состоянием из компонентов в отдельную функцию reducer c помощью хука useReducer. Перед вами небольшое todo-приложение. В нём можно делать два действия: добавлять и удалять todo. Изначально в коде есть: Компонент App — в нём с помощью useState создается глобальное состояние: массив todos и функция setTodos. Компонент TodoInput — в нём реализована логика добавления нового todo в массив todos. Компонент TodoList — он отвечает за отображение списка todo. Компонент TodoItem — он отображает само todo, также в нем реализована логика удаления этого todo. Вам необходимо: Создать папку src/reducers. В этой папке создать функцию todoReducer , которая принимает два аргумента: массив todos. action — объект с данными действия, которые производятся над todos . В нашем случае это действия добавления и удаления todo. В тело функции todoReducer нужно вынести логику создания из TodoInput и логику удаления из TodoItem . В зависимости от типа action, нужно производить с массивом todos соответствующее действие. Использовать в App хук useReducer , передав в него функцию редьюсер todoReducer. import './styles.css' import {TodoInput} from '../components/TodoInput/TodoInput'; import {TodoList} from '../components/TodoList/TodoList'; import {TodoModel} from '../models/TodoModel'; import {useState} from 'react'; import {getRandomInt} from '../utils/getRandomInt'; const initialTodos: TodoModel[] = [ { id: getRandomInt(), text: 'Полить цветы' }, { id: getRandomInt(), text: 'Погулять с собакой' }, { id: getRandomInt(), text: 'Прочитать книгу' } ] export const App = () => { const [todos, setTodos] = useState<TodoModel[]>(initialTodos) return ( <div className='container'> <div className='inner'> <TodoInput todos={todos} setTodos={setTodos}/> <TodoList todos={todos} setTodos={setTodos}/> </div> </div> ) } import './styles.css' import {TodoModel} from '../../models/TodoModel'; import {ChangeEvent, FormEvent, useState} from 'react'; import {getRandomInt} from '../../utils/getRandomInt'; interface TodoInputProps { todos: TodoModel[], setTodos: (todos: TodoModel[]) => void; } export const TodoInput = ({ todos, setTodos }: TodoInputProps) => { const [todoText, setTodoText] = useState<string>(''); const onInputChange = (e: ChangeEvent<HTMLInputElement>) => { setTodoText(e.target.value); }; const onAddTodo = (e: FormEvent) => { e.preventDefault() if (todoText !== '') { setTodoText(''); setTodos([ ...todos, { id: getRandomInt(), text: todoText } ]); } } return ( <form onSubmit={onAddTodo} className='todo-form'> <input type='text' className='todo-input' placeholder='Введите todo...' onChange={onInputChange} value={todoText} /> <button type='submit' className='todo-submit-button'> Добавить </button> </form> ) } import './styles.css' import {TodoModel} from '../../models/TodoModel'; interface TodoItemProps { todo: TodoModel, todos: TodoModel[], setTodos: (todos: TodoModel[]) => void; } export const TodoItem = ({ todo, todos, setTodos }: TodoItemProps) => { const { id, text } = todo; const onDeleteTodo = () => { const newTodos = todos.filter((todo) => { return todo.id !== id; }); setTodos(newTodos); } return ( <li className='todo-item'> <div> {text} </div> <button className='todo-delete-button' onClick={onDeleteTodo}> удалить </button> </li> ) } import { TodoModel } from '../../models/TodoModel'; import {TodoItem} from '../TodoItem/TodoItem'; import './styles.css' interface TodoListProps { todos: TodoModel[], setTodos: (todos: TodoModel[]) => void; } export const TodoList = ({ todos, setTodos }: TodoListProps) => { return ( <ul className='list'> {todos.map((todo: TodoModel) => <TodoItem key={todo.id} todo={todo} todos={todos} setTodos={setTodos} /> )} </ul> ) } как нужно изменить код?

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

Создайте папку src/reducers.
В этой папке создайте файл todoReducer.ts и добавьте в него следующий код:

import { TodoModel } from '../models/TodoModel';

type Action = { type: 'ADD_TODO', text: string } | { type: 'DELETE_TODO', id: number };

const todoReducer = (todos: TodoModel[], action: Action): TodoModel[] => {
    switch (action.type) {
        case 'ADD_TODO':
            return [
                ...todos,
                {
                    id: Math.floor(Math.random() * 1000),
                    text: action.text
                }
            ];
        case 'DELETE_TODO':
            return todos.filter(todo => todo.id !== action.id);
        default:
            return todos;
    }
};

export default todoReducer;

В компоненте App замените использование useState на использование useReducer:

import './styles.css'
import { TodoInput } from '../components/TodoInput/TodoInput';
import { TodoList } from '../components/TodoList/TodoList';
import { TodoModel } from '../models/TodoModel';
import { useReducer } from 'react';
import todoReducer from '../reducers/todoReducer';

const initialTodos: TodoModel[] = [
    {
        id: Math.floor(Math.random() * 1000),
        text: 'Полить цветы'
    },
    {
        id: Math.floor(Math.random() * 1000),
        text: 'Погулять с собакой'
    },
    {
        id: Math.floor(Math.random() * 1000),
        text: 'Прочитать книгу'
    }
]

export const App = () => {
    const [todos, dispatch] = useReducer(todoReducer, initialTodos);
    return (
        <div className='container'>
            <div className='inner'>
                <TodoInput dispatch={dispatch} />
                <TodoList todos={todos} dispatch={dispatch} />
            </div>
        </div>
    )
}

В компоненте TodoInput замените setTodos на вызов dispatch с нужным action:

import './styles.css'
import { TodoModel } from '../../models/TodoModel';
import { ChangeEvent, FormEvent, useState } from 'react';

interface TodoInputProps {
    dispatch: React.Dispatch<{ type: 'ADD_TODO', text: string }>;
}

export const TodoInput = ({ dispatch }: TodoInputProps) => {

    const [todoText, setTodoText] = useState<string>('');

    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
        setTodoText(e.target.value);
    };

    const onAddTodo = (e: FormEvent) => {
        e.preventDefault()
        if (todoText !== '') {
            dispatch({ type: 'ADD_TODO', text: todoText });
            setTodoText('');
        }
    }

    return (
        <form onSubmit={onAddTodo} className='todo-form'>
            <input
                type='text'
                className='todo-input'
                placeholder='Введите todo...'
                onChange={onInputChange}
                value={todoText}
            />
            <button type='submit' className='todo-submit-button'>
                Добавить
            </button>
        </form>
    )
}

В компоненте TodoList также замените setTodos на вызов dispatch с нужным action:

import { TodoModel } from '../../models/TodoModel';
import { TodoItem } from '../TodoItem/TodoItem';
import './styles.css';

interface TodoListProps {
    todos: TodoModel[],
    dispatch: React.Dispatch<{ type: 'ADD_TODO', text: string } | { type: 'DELETE_TODO', id: number }>;
}

export const TodoList = ({ todos, dispatch }: TodoListProps) => {
    return (
        <ul className='list'>
            {todos.map((todo: TodoModel) =>
                <TodoItem
                    key={todo.id}
                    todo={todo}
                    dispatch={dispatch}
                />
            )}
        </ul>
    )
}

В компоненте TodoItem также замените setTodos на вызов dispatch с нужным action:

import { TodoModel } from '../../models/TodoModel';

interface TodoItemProps {
    todo: TodoModel,
    dispatch: React.Dispatch<{ type: 'ADD_TODO', text: string } | { type: 'DELETE_TODO', id: number }>;
}

export const TodoItem = ({ todo, dispatch }: TodoItemProps) => {
    const { id, text } = todo;

    const onDeleteTodo = () => {
        dispatch({ type: 'DELETE_TODO', id: id });
    }

    return (
        <li className='todo-item'>
            <div>
                {text}
            </div>
            <button className='todo-delete-button' onClick={onDeleteTodo}>
                удалить
            </button>
        </li>
    )
}

Теперь логика работы с состоянием todos вынесена в редьюсер todoReducer, а компоненты используют хук useReducer для управления состоянием.

Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)

import { TodoModel } from '../models/TodoModel';

type Action = { type: 'ADD_TODO', text: string } | { type: 'DELETE_TODO', id: number };

const todoReducer = (todos: TodoModel[], action: Action): TodoModel[] => {
    switch (action.type) {
        case 'ADD_TODO':
            return [
                ...todos,
                {
                    id: Math.floor(Math.random() * 1000),
                    text: action.text
                }
            ];
        case 'DELETE_TODO':
            return todos.filter(todo => todo.id !== action.id);
        default:
            return todos;
    }
};

export default todoReducer;

import './styles.css'
import { TodoInput } from '../components/TodoInput/TodoInput';
import { TodoList } from '../components/TodoList/TodoList';
import { TodoModel } from '../models/TodoModel';
import { useReducer } from 'react';
import todoReducer from '../reducers/todoReducer';

const initialTodos: TodoModel[] = [
    {
        id: Math.floor(Math.random() * 1000),
        text: 'Полить цветы'
    },
    {
        id: Math.floor(Math.random() * 1000),
        text: 'Погулять с собакой'
    },
    {
        id: Math.floor(Math.random() * 1000),
        text: 'Прочитать книгу'
    }
]

export const App = () => {
    const [todos, dispatch] = useReducer(todoReducer, initialTodos);
    return (
        <div className='container'>
            <div className='inner'>
                <TodoInput dispatch={dispatch} />
                <TodoList todos={todos} dispatch={dispatch} />
            </div>
        </div>
    )
}

import './styles.css'
import { TodoModel } from '../../models/TodoModel';
import { ChangeEvent, FormEvent, useState } from 'react';

interface TodoInputProps {
    dispatch: React.Dispatch<{ type: 'ADD_TODO', text: string }>;
}

export const TodoInput = ({ dispatch }: TodoInputProps) => {

    const [todoText, setTodoText] = useState<string>('');

    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
        setTodoText(e.target.value);
    };

    const onAddTodo = (e: FormEvent) => {
        e.preventDefault()
        if (todoText !== '') {
            dispatch({ type: 'ADD_TODO', text: todoText });
            setTodoText('');
        }
    }

    return (
        <form onSubmit={onAddTodo} className='todo-form'>
            <input
                type='text'
                className='todo-input'
                placeholder='Введите todo...'
                onChange={onInputChange}
                value={todoText}
            />
            <button type='submit' className='todo-submit-button'>
                Добавить
            </button>
        </form>
    )
}

import { TodoModel } from '../../models/TodoModel';
import { TodoItem } from '../TodoItem/TodoItem';
import './styles.css';

interface TodoListProps {
    todos: TodoModel[],
    dispatch: React.Dispatch<{ type: 'ADD_TODO', text: string } | { type: 'DELETE_TODO', id: number }>;
}

export const TodoList = ({ todos, dispatch }: TodoListProps) => {
    return (
        <ul className='list'>
            {todos.map((todo: TodoModel) =>
                <TodoItem
                    key={todo.id}
                    todo={todo}
                    dispatch={dispatch}
                />
            )}
        </ul>
    )
}

import { TodoModel } from '../../models/TodoModel';

interface TodoItemProps {
    todo: TodoModel,
    dispatch: React.Dispatch<{ type: 'ADD_TODO', text: string } | { type: 'DELETE_TODO', id: number }>;
}

export const TodoItem = ({ todo, dispatch }: TodoItemProps) => {
    const { id, text } = todo;

    const onDeleteTodo = () => {
        dispatch({ type: 'DELETE_TODO', id: id });
    }

    return (
        <li className='todo-item'>
            <div>
                {text}
            </div>
            <button className='todo-delete-button' onClick={onDeleteTodo}>
                удалить
            </button>
        </li>
    )
}

ЯсноПонятно24

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: