Рубрики
Без рубрики

Создайте App Tracker React Budget Tracker – Узнайте API React & Context с помощью этого забавного проекта

В этом учебное пособие по эксплуатации приложения React Budget Tracker мы собираемся: мы узнаем, как разбить пользовательские интерфейсы в React Componentslearn, как работать с состоянием, используя контекст Apilearn о действиях, редукторах и функцию отправки, и я дам вам некоторые Проблемы, которые вы можете попробовать на

Автор оригинала: FreeCodeCamp Community Member.

В этом React Budget Tracker Tracker Truster Tutorial мы собираемся:

  • Мы узнаем, как сломать интернет-интерфейс в компоненты реагирования
  • Узнайте, как работать с состоянием, используя контекст API
  • Узнайте о действиях, редукторах и функции отправки

И я дам вам несколько проблем, которые вы можете попробовать в конце!

Это то, что мы построим:

Пользователь может:

  • Добавьте расходы, которые имеют имя и стоимость
  • Удалить расходы
  • Посмотреть, сколько их бюджета остается
  • Посмотреть, сколько они потратили до сих пор
  • (Challenge) Редактировать бюджет
  • (Challenge) поиск расходов

Видео прохождение

Вот видео прохождение, если вы хотите дополнить свое чтение (на YouTube)

Исходный код

Наконец, если вы заблудитесь, следуя вместе, Вы можете схватить готовый код здесь (на Github) Отказ

Пойдем!

Как настроить реактивный проект

Первое, что нам нужно сделать, это настроить реактивный проект. Для этого мы будем использовать Create-React-App Отказ

Огоньте терминал и введите:

Budget-Tracker Create-React-App

Когда это закончило, делаем, мы собираемся установить Bootstrap. Это даст нам готовые стили, которые мы можем использовать вместо того, чтобы создать собственные в CSS.

В том же терминале, перейдите в ваш рабочий каталог и установите Bootstrap:

cd budget-tracker
npm i bootstrap

Далее мы собираемся установить пакет, который позволяет нам генерировать идентификаторы. Мы будем использовать идентификаторы для идентификации каждого расхода в списке, так что это важно.

Запустите следующую команду в каталоге проекта:

npm i uuid

Последний пакет, который нам нужен для установки, дает нам некоторые значки для использования, что экономит нас от необходимости создавать их сами.

Запустите следующую команду в каталоге проекта:

npm i react-icons

Теперь откройте проект в VS-коде (или любой IDE вы используете). Вы должны увидеть некоторые вещи в дереве проекта (это наш пустой проект реагирования).

Вы можете игнорировать большую часть этого, так как мы будем создавать наши собственные компоненты. Откройте app.js, удалите все и добавьте следующее:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
	return 
Hello React!
;
};

export default App;

Что это делает:

  • Импортирует Bootstrap CSS в наш проект
  • Создает компонент, который отображает «Привет реагировать!» с тегами параграфа
  • Экспортирует этот компонент, чтобы другие компоненты могли использовать его

Далее мы будем уволить приложение и убедитесь, что все работает, как следует. Откройте терминал (либо в VS код или иным образом) и запустите приложение, набрав следующее:

npm start

Все хорошо, приложение должно начинаться и открываться в браузере:

Успех! Теперь мы готовы начать строить наши компоненты реагирования.

Как поставить компоненты интерфейса на месте

Одним из подходов к созданию приложений является начать с помощью компонентов пользовательских интерфейсов на месте с помощью некоторых фиктивных данных. Обычно это помогает с визуализацией того, какие предметы государства нужны, и обычно означает меньше переработки позже.

С учетом того, что мы собираемся поставить наши компоненты пользовательского интерфейса начать начиная с вершины и работать.

Как создать бюджетный компонент

Прыгай в код, в SRC Папка, создайте новую папку под названием составные части. Внутри этого создайте файл под названием Budget.js. Ваша структура проекта должна выглядеть так:

Откройте Budget.js и добавьте следующее:

import React from 'react';

const Budget = () => {
	return (
		

			Budget: £2000
		

	);
};

export default Budget;

Что мы делаем:

  • Создание нового компонента под названием Бюджет (линия 3)
  • Используя Bootstrap Alert Классы, чтобы дает нам хороший серый фон (линия 5)
  • Добавление некоторого текста и жесткого кодирования значения (строка 6)

Как создать оставшийся компонент

Далее мы создадим Оставшиеся Компонент, который показывает, сколько бюджета ушел пользователь.

Создайте новый файл под SRC/Компоненты называется Осталось .js Отказ Откройте его и добавьте следующее:

import React from 'react';

const Remaining = () => {
	return (
		

			Remaining: £1000
		

	);
};

export default Remaining;

Что мы делаем:

  • Создание нового компонента под названием Оставшиеся (линия 3)
  • Используя Bootstrap Alert Классы дают нам зеленый фон (линия 5)
  • Добавление некоторого текста и жесткого кодирования значения (строка 6)
  • Добавление потрачено до сих пор

Наконец, мы создадим Потратил до сих пор Компонент, который показывает, насколько пользователь потратил до сих пор.

Создайте новый файл под SRC/Компоненты называется Expensetol.js Отказ Откройте его и добавьте следующее:

import React from 'react';

const ExpenseTotal = () => {
	return (
		

			Spent so far: £1000
		

	);
};

export default ExpenseTotal;

Что мы делаем:

  • Создание нового компонента под названием Expensetotal (линия 3)
  • Используя Bootstrap Alert классы, чтобы дать нам синий фон (строка 5)
  • Добавление некоторого текста и жесткого кодирования значения (строка 6)

Как добавить заголовок и представлять наши компоненты

На данный момент вы можете думать: «Эти компоненты все выглядят одинаково, что дает?!». Это правда, хотя помните, что мы просто добавляем некоторые жесткие данные для них. Позже каждый компонент будет делать разные вещи, чтобы динамически отображать данные.

Теперь мы создали наши компоненты, нам нужно сделать их в App.js. Откройте app.js и добавьте следующее:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';

const App = () => {
	return (
			

				
My Budget Planner

				

					

						
					

					

						
					

					

						
					

				

			

	);
};

export default App;

Что мы делаем:

  • Импорт наших различных компонентов (линии 3-5)
  • Добавление контейнера Bootstrap, которое помогает нам в центре нашего приложения на странице (строка 9)
  • Добавление заголовка (строка 9)
  • Добавление строки Bootstrap (строка 10)
  • Добавление столбца в строке для каждого из наших компонентов до сих пор (строки 12-20)

Теперь, если вы запустите приложение, вы должны увидеть заголовок, а наши компоненты, представленные на странице!

Как создать компонент списка расходов

Далее мы построим Экспедист составная часть. Этот компонент будет отвечать за предпринять список расходов, а также оказание EXPENSEITEM Компонент для каждого элемента.

Мы добавим несколько фиктивных данных, чтобы убедиться, что наш интерфейс выглядит хорошо, и вещи работают как предназначены. Позже этот материал придет из контекста.

Начните с создания нового файла под SRC/Компоненты называется EXPENSELIST.JS Отказ Откройте EXPENSELIST.JS и добавьте следующее:

import React from 'react'
import ExpenseItem from './ExpenseItem';

const ExpenseList = () => {
    const expenses = [
		{ id: 12, name: 'shopping', cost: 40 },
		{ id: 13, name: 'holiday', cost: 400 },
		{ id: 14, name: 'car service', cost: 50 },
	];

    return (
		
    
			{expenses.map((expense) => (
				
			))}
		

    )
}

export default ExpenseList

Что мы делаем:

  • Добавление фиктивного списка расходов. За каждый счет нам нужен идентификатор, имя и стоимость. Позже мы возьмем этот список из контекста (строка 4)
  • Создание списка (строка 11)
  • Используя функцию карты, чтобы повторить расходы и отображение компонента EXPENSEITEM (мы еще не создали этого! Line 12)
  • Передача идентификатора, имени и стоимость экстренной компонента в качестве реквизита

Как создать элемент расходов

Теперь мы создали компонент для удержания нашего списка, нам нужен компонент для рендеринга каждого элемента. Создайте новый файл в SRC/Компоненты Папка называется Expenseitem.js. Откройте его и добавьте следующее:

import React from 'react';
import { TiDelete } from 'react-icons/ti';

const ExpenseItem = (props) => {
	return (
		
  • 
			{props.name}
			
    
				
					£{props.cost}
				
				
			
    
		
    • 
	);
};

export default ExpenseItem;

    Что мы делаем:

    • Создание элемента списка (строка 6)
    • Рендеринг названия расходов, которые мы получаем от реквизитов (строка 7)
    • Оказание стоимости расходов, которые мы также получаем от реквизитов
    • Мы отображаем DELETEICON (строка 12), которую мы получаем от пакета React-Icons (строка 2)

    Как визуализировать компонент ExpenceList

    Теперь мы создали наши компоненты, мы просто должны представлять ExpenseList в App.js. Откройте App.js и обновите его следующим:

    import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';
import ExpenseList from './components/ExpenseList';

const App = () => {
	return (
		
    
			
    My Budget Planner
    
			
    
				
    
					
				
    
				
    
					
				
    
				
    
					
				
    
			
    
			
    Expenses
    
			
    
				
    
					
				
    
			
    
		
    
	);
};

export default App;

    Какие новости:

    • Мы импортировали наш excenselist (строка 6)
    • Добавлена новая строка Bootstrap (строка 24)
    • Оказал наш excenselist (линия 26)

    Теперь, если вы сохраните/запустите приложение, вы увидите, как появился список расходов!

    Как создать компонент формы «Добавить расходы»

    Наши компоненты пользовательского интерфейса почти полны! Последний компонент, который нам нужен, – это компонент формы «Add Expense», который позволяет пользователям добавлять новые расходы. Мы сначала поместим компоненты пользовательских интерфейсов для формы, затем вернитесь позже и добавьте причудливые вещи.

    Создайте новый файл в SRC/Компоненты называется Addexpenseform.js Отказ Выпустите это и добавьте следующее:

    import React from 'react';

const AddExpenseForm = () => {

	return (
		
    
			
    
				
    
					
					
				
    
				
    
					
					
				
    

			
    
            
    
            	
    
					
				
    
            
    
		
    
	);
};

export default AddExpenseForm;

    Что мы делаем:

    • Добавление нашей формы теги (строка 6)
    • Добавление метки/ввода для наших Имя поле (строка 9)
    • Добавление метки/ввода для наших Стоимость поле (линия 18)
    • Добавление кнопки для отправки формы (строка 30)

    Как сделать компонент addexpenseform

    Наконец в App.js мы должны сделать наш новый компонент. Обновите app.js со следующими:

    import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';
import ExpenseList from './components/ExpenseList';
import AddExpenseForm from './components/AddExpenseForm';

const App = () => {
	return (
		
    
			
    My Budget Planner
    
			
    
				
    
					
				
    
				
    
					
				
    
				
    
					
				
    
			
    
			
    Expenses
    
			
    
				
    
					
				
    
			
    
			
    Add Expense
    
			
    
				
    
					
				
    
			
    
		
    
	);
};

export default App;

    Что изменилось:

    • Импортировал addexpenseform (строка 7)
    • Отображается addexpenseform (строка 33)

    Как добавить API контекста

    Контекст API – это то, что мы будем использовать для хранения нашего глобального состояния. Это уже часть библиотеки RACT, поэтому не нужно импортировать/устанавливать все остальное.

    Начните с создания новой папки в SRC Папка называется контекст. В этой папке создайте новый файл под названием Appcontext.js.

    Как создать начальное состояние

    Первое, что наш контекст должен работать – это начальное состояние. Это указывает на «форму» нашего состояния (другими словами, какие свойства и данные, которые мы имеем) и могут использоваться для инициализации приложения с данными из вызова API, например.

    На данный момент мы просто добавим некоторые начальные значения. В AppContext.js добавьте следующее:

    const initialState = {
	budget: 2000,
	expenses: [
		{ id: 12, name: 'shopping', cost: 40 },
		{ id: 13, name: 'holiday', cost: 400 },
		{ id: 14, name: 'car service', cost: 50 },
	],
};
    • Мы добавляем первоначальный бюджет
    • Мы добавляем фиктивный список расходов

    Как создать AppContext

    Далее мы создадим AppContext. Это то, что наши компоненты импортируют и используют, чтобы получить состояние.

    Обновите AppContext.js со следующими:

    const initialState = {
	budget: 2000,
	expenses: [
		{ id: 12, name: 'shopping', cost: 40 },
		{ id: 13, name: 'holiday', cost: 400 },
		{ id: 14, name: 'car service', cost: 50 },
	],
};

export const AppContext = createContext();

    Все, что мы сделали, добавлен вызов CreateContext в строке (11) – вот наш объект контекста создан!

    Как создать AppProvider

    Поставщик – это компонент, который оборачивает компоненты, которые мы хотим пройти состояние. Мы используем его в сочетании с помощью крюка USERDURER, чтобы на самом деле хранить глобальное состояние.

    Обновите файл AppContext.js так:

    const initialState = {
	budget: 2000,
	expenses: [
		{ id: 12, name: 'shopping', cost: 40 },
		{ id: 13, name: 'holiday', cost: 400 },
		{ id: 14, name: 'car service', cost: 50 },
	],
};

export const AppContext = createContext();

export const AppProvider = (props) => {
	const [state, dispatch] = useReducer(AppReducer, initialState);

	return (
		
			{props.children}
		
	);
};

    Что мы делаем:

    • Создание нашего компонента поставщика (строка 12)
    • Настройка крюка USERTUREUS, который удерживает наше состояние и позволит нам обновить состояние через Dispatch (обратите внимание, что мы еще не создали Учреждение! Линия 13)
    • Мы возвращаемся Appcontext.provider. Это имеет ценность PROP, который содержит данные, которые мы позволяем нашим компонентам видеть и иметь доступ, а также функцию отправки, которая позволяет нам обновить состояние путем диспетчеризации действий (строка 16)

    Как создать аргумент

    Далее мы создадим аргументу. Редуктор отвечает за создание нового глобального объекта состояния на основе типа действия и полезной нагрузки.

    Обновите AppContext.js со следующими:

    const AppReducer = (state, action) => {
	switch (action.type) {
		default:
			return state;
	}
};

const initialState = {
	budget: 2000,
	expenses: [
		{ id: 12, name: 'shopping', cost: 40 },
		{ id: 13, name: 'holiday', cost: 400 },
		{ id: 14, name: 'car service', cost: 50 },
	],
};

export const AppContext = createContext();

export const AppProvider = (props) => {
	const [state, dispatch] = useReducer(AppReducer, initialState);

	return (
		
			{props.children}
		
	);
};

    Что мы делаем:

    • Создание функции, которая принимает текущее состояние и действие (строка 1)
    • Мы используем коммутатор на основе Action.Type, чтобы решить, как обновить состояние (строка 2)
    • На данный момент, поскольку мы просто получаем все настройки, мы просто собираемся вернуть состояние по умолчанию, и добавлять действия позже, так как они нуждаются в них (строка 3)

    Вот и все! Наше глобальное государство теперь настроено и готовы к работе.

    Как связать AppContext в наше приложение

    Следующим шагом является соединение нашего AppContext на нашему компоненту приложения. Мы делаем это, обернув компоненты, которые мы хотим пройти состояние с AppProvider.

    Перепрыгните обратно в app.js и обновите следующее:

    import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';
import ExpenseList from './components/ExpenseList';
import AddExpenseForm from './components/AddExpenseForm';
import { AppProvider } from './context/AppContext';

const App = () => {
	return (
		
			
    
				
    My Budget Planner
    
				
    
					
    
						
					
    
					
    
						
					
    
					
    
						
					
    
				
    
				
    Expenses
    
				
    
					
    
						
					
    
				
    
				
    Add Expense
    
				
    
					
    
						
					
    
				
    
			
    
		    
	);
};

export default App;

    Что изменилось:

    • Импортировал наши AppProvider (линия 8)
    • Вложенные наши компоненты в элементе AppProvider (линии 12/строки 39)

    Теперь, когда наши компоненты вложены в AppProvider, у них есть доступ к ценность Объект, который AppProvider обнародован.

    Как подключить наши компоненты к AppContext

    Как сделать бюджет из контекста

    Теперь мы можем начать вытягивать глобальные значения состояния в наши компоненты. Мы начнем с бюджета, поэтому прыгайте в Budget.js и добавьте следующее:

    import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';

const Budget = () => {
	const { budget } = useContext(AppContext);

	return (
		
    
			Budget: £{budget}
		
    
	);
};

export default Budget;

    Что мы делаем:

    • Мы должны импортировать AppContext из нашего контекста (линия 2)
    • Мы импортируем упреждающий текст Крюк и пропустите наш AppContext к нему – именно то, как компонент подключается к контексту, чтобы получить значения из глобального состояния
    • Мы используем Разрушение Чтобы получить бюджет Из контекста (строка 5)
    • Мы оказываем бюджет в нашем JSX (строка 9)

    Теперь, если вы измените бюджет в AppContext и перезагрузите браузер, вы увидите обновления бюджета на UI. Это означает, что наш компонент успешно вытягивает данные из нашего контекста. Успех!

    Как представлять расходы из контекста

    Теперь мы можем сделать что-то подобное с списком расходов. Откройте EXPENSELIST.JS и обновите его следующим:

    import React, { useContext } from 'react';
import ExpenseItem from './ExpenseItem';
import { AppContext } from '../context/AppContext';

const ExpenseList = () => {
	const { expenses } = useContext(AppContext);

	return (
		
      
			{expenses.map((expense) => (
				
			))}
		
    
	);
};

export default ExpenseList;

    Что мы делаем:

    • Импортировка нашего AppContext и USECONTEXT крючков, как раньше
    • Мы сняли фиктивный список расходов
    • Мы заменили список фиктивных лиц с помощью списка расходов, которые мы храним в контексте

    Так как мы уже сделали работу, чтобы сделать список расходов, нам не нужно ничего делать! Обновите браузер, и вы увидите, что список теперь поступает из контекста, а не в фиктивном списке.

    Помните, что мы экспортировали расходы как часть объекта стоимости в поставщике. Любой компонент, завернутый в поставщик, может получить доступ к этому объекту стоимости и использовать разрушительную настройку, чтобы получить конкретное значение для него необходимо.

    Как добавить новые расходы – захватывающие значения формы

    Пока мы посмотрели, как получить ценности из штата, затем мы посмотрим на то, как мы можем отправлять действия и обновить состояние.

    Прежде чем мы сделаем это, нам нужно знать Имя и Стоимость новых расходов, которые пользователь ввел. Перепрыгните в AddexPenseForm.js и добавьте следующее:

    import React, { useState } from 'react';

const AddExpenseForm = () => {
	const [name, setName] = useState('');
	const [cost, setCost] = useState('');

	const onSubmit = (event) => {

	};

	return (
		
    
			
    
				
    
					
					 setName(event.target.value)}
					>
				
    
				
    
					
					 setCost(event.target.value)}
					>
				
    
				
    
					
				
    
			
    
		
    
	);
};

export default AddExpenseForm;

    Что мы делаем:

    • Использование реагирования на управление Входные значения Отказ Для каждого поля ввода у нас есть объект состояния (строки 7 и 8)
    • Когда пользователь наносит входы, соответствующие значения состояния будут обновляться (строки 25 и 36)
    • Когда пользователь нажимает кнопку, это позвонит OnsUbmit функция. Эта функция не делает ничего прямо сейчас, но именно здесь мы отправляем действие от

    Теперь у нас есть значения формы, хранящиеся в состоянии, мы можем отправить действие для обновления состояния.

    Как добавить новый расход – рассылав действие

    Обновите addexpenseform со следующими:

    import React, { useContext, useState } from 'react';
import { AppContext } from '../context/AppContext';
import { v4 as uuidv4 } from 'uuid';

const AddExpenseForm = () => {
	const { dispatch } = useContext(AppContext);

	const [name, setName] = useState('');
	const [cost, setCost] = useState('');

	const onSubmit = (event) => {
		event.preventDefault();

		const expense = {
			id: uuidv4(),
			name: name,
			cost: parseInt(cost),
		};

		dispatch({
			type: 'ADD_EXPENSE',
			payload: expense,
		});
	};

	return (
		
    
			
    
				
    
					
					 setName(event.target.value)}
					>
				
    
				
    
					
					 setCost(event.target.value)}
					>
				
    
				
    
					
				
    
			
    
		
    
	);
};

export default AddExpenseForm;

    Что мы делаем:

    • Импортируя AppContext и USEContext как обычно
    • Получение Отправка из нашего глобального государства (линия 6)
    • Создание Объект расходов, содержащий имя и стоимость. Это то, что будет отправлено в качестве полезной нагрузки, и что мы будем использовать для обновления состояния. Мы также используем пакет UUID, который мы импортировали ранее, чтобы создать идентификатор. Это используется для определения заданного расхода (строка 14).
    • Мы отправляем Действие , с типом и нашей полезной нагрузкой. Тип сообщает редуктору, как обновить состояние, которое мы увидим через минуту (строка 20)

    Как добавить новый расход – обновление редуктора

    Это от составляющей стороны. Вы заметите, если вы запустите это в браузере, ничего не происходит. Это потому, что мы не обновили наш редуктор, чтобы обработать действие и обновить состояние.

    Прыгать в Appcontext.js и обновить Редуктор Функция со следующим:

    const AppReducer = (state, action) => {
	switch (action.type) {
		case 'ADD_EXPENSE':
			return {
				...state,
				expenses: [...state.expenses, action.payload],
			};
		default:
			return state;
	}
};

    Что мы делаем:

    • Мы проверяем тип действия (которое мы получаем от переменной действия) (строка 2)
    • Добавление нового случая к оператору коммутатора под названием «Add_Expense» (строка 3)
    • Возвращая новый объект государства с новым расходом, принимающим из полезной нагрузки (которую мы получаем от переменной действия) (строка 4)

    Теперь, если вы запустите код, и добавьте новый счет, вы можете увидеть, что он добавляется в список расходов!

    Как рассчитать потраченным до сих пор

    Следующая вещь, которую мы посмотрим, рассчитывает, сколько пользователь потратил до сих пор. Для этого мы возьмем все расходы, которые пользователь потратил и отображает его на UI.

    Откройте Expensetol.js и обновите его следующим:

    import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';

const ExpenseTotal = () => {
	const { expenses } = useContext(AppContext);

	const totalExpenses = expenses.reduce((total, item) => {
		return (total += item.cost);
	}, 0);

	return (
		
    
			Spent so far: £{totalExpenses}
		
    
	);
};

export default ExpenseTotal;

    Что мы делаем:

    • Импорт нашего упреждающего текста и AppContext как обычно
    • Принимая расходы из штата (строка 5)
    • Использование функции уменьшения, чтобы получить всей стоимости и назначение этого переменной (строка 7)
    • Отображение переменной в нашем JSX (линия 13)

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

    Идите вперед и попробуйте это в браузере.

    Как рассчитать оставшийся

    Теперь мы посмотрим на расчет, сколько бюджета указывало пользователь.

    Для этого мы получим общие расходы на расходы и вычте его из бюджета. Если пользователь пройдет бюджет, то есть расходы – это больше, чем бюджет, мы хотим отображать красный фон (в отличие от зеленого фона). К счастью, Bootstrap дает нам эти хорошие вещи уже.

    Откройте оставшиеся .JS и обновите его следующим:

    import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';

const Remaining = () => {
	const { expenses, budget } = useContext(AppContext);

	const totalExpenses = expenses.reduce((total, item) => {
		return (total = total + item.cost);
	}, 0);

	const alertType = totalExpenses > budget ? 'alert-danger' : 'alert-success';

	return (
		
    
			Remaining: £{budget - totalExpenses}
		
    
	);
};

export default Remaining;

    Что мы делаем

    • Импорт расходов и бюджета из контекста (строка 5)
    • Получение общих расходов расходов с использованием функции уменьшения (линия 7)
    • Создание переменной для хранения CSS Classname, которое мы хотим отображать (в зависимости от того, если пользователь пошел через бюджет или нет, строка 11)
    • Использование строки шаблона для создания наших классов (строка 14)
    • Оказание оставшегося бюджета с использованием вычитания (строка 15)

    Теперь, если вы запустите код в браузере, и добавьте кучу расходов до тех пор, пока общий объем не пойдет за 2000 год, вы увидите, что «оставшийся» фона компонента поворачивается к красному!

    Как удалить расходы

    Последнее, что мы рассмотрим, прежде чем попасть в проблемы, – это удалить расходы.

    Когда пользователь нажимает на небольшой крест рядом с расходом, мы хотим отправить действие, чтобы удалить его из состояния. Когда это произойдет, наш Expenselist перенесет с удаленными расходами.

    Перепрыгните в expenseitem.js и обновите его следующим:

    import React, { useContext } from 'react';
import { TiDelete } from 'react-icons/ti';
import { AppContext } from '../context/AppContext';

const ExpenseItem = (props) => {
	const { dispatch } = useContext(AppContext);

	const handleDeleteExpense = () => {
		dispatch({
			type: 'DELETE_EXPENSE',
			payload: props.id,
		});
	};

	return (
		
  • 
			{props.name}
			
    
				
					£{props.cost}
				
				
			
    
		
    • 
	);
};

export default ExpenseItem;

    Что мы делаем:

    • Импортировка отправки из контекста, который позволяет нам отправлять действие удаления (строка 6)
    • Создание функции, которая вызывается, когда нажата значок удаления (строка 8)
    • Отправляя действие. Наше действие содержит тип (поэтому редуктор знает, как обновить состояние) и полезную нагрузку. В этом случае мы передаем идентификатор этого расхода (который мы получаем от реквизитов, когда мы выдавали ExpenceList) (строка 9)

    Если вы попробуете это в браузере, вы увидите, что ничего не происходит. Несмотря на то, что мы отправляем действие, мы не реализовали логику редуктора для этого типа действия, поэтому он не знает, как обновить состояние.

    Перепрыгивайте в AppContext.js и обновите функцию редуктора со следующими:

    const AppReducer = (state, action) => {
	switch (action.type) {
		case 'ADD_EXPENSE':
			return {
				...state,
				expenses: [...state.expenses, action.payload],
			};
		case 'DELETE_EXPENSE':
			return {
				...state,
				expenses: state.expenses.filter(
					(expense) => expense.id !== action.payload
				),
			};
		default:
			return state;
	}
};

    Все, что мы действительно делаем здесь, добавляют новое заявление о случаях, чтобы справиться с нашим Delete_expense действие. Мы используем метод массива фильтра для удаления расходов, который имеет идентификатор, который мы получили от полезной нагрузки.

    Теперь, если вы попробуете это, вы можете удалить счет, щелкнув значок «Удалить». Обратите внимание, как все другие компоненты также обновляются. Хороший!

    Проблемы, чтобы попробовать

    Поздравляю с тем, чтобы сделать это далеко! Теперь его время для вас, чтобы пойти на некоторые проблемы. Помните, что вы можете посмотреть, как я это сделал в исходный код GitHub.

    Разрешить пользователю редактировать бюджет

    Вы заметите, что до сих пор мы использовали жесткое заданное значение для бюджета. Ваша первая задача – добавить функциональность, которая позволяет пользователю редактировать бюджет. Некоторые советы, чтобы начать:

    • Вам нужно будет добавить текстовый ввод, который позволяет пользователю ввести значение для их желаемого бюджета.
    • Мы храним бюджет в состоянии, поэтому вам нужно будет отправить действие с новым типом и полезной нагрузкой, которая обновит состояние

    Разрешить пользователю искать расходы

    Если у пользователя есть много расходов, будет трудно найти тот, который они ищут. Добавьте способ для пользователя поиску расходов по имени. Некоторые советы, чтобы начать:

    • Вам нужно будет добавить поле ввода, которое позволяет пользователю ввести значение для поиска.
    • Вам придется добавить что-то в компонент Expenselist, который фильтрует список из контекста на основе этого значения поиска.

    Спасибо за прочтение!

    Читайте ещё по теме: