Как разместить контент формы на карточном компоненте

Question

Я надеялся, что кто-нибудь сможет объяснить мне, как я могу получить информацию, представленную в моей форме, для отображения в карточном компоненте? В каком-то смысле это прославленный список задач, но я хочу знать, какой будет наилучшая практика (т.е. получение данных из моей базы данных или из магазина ...?)

import React from 'react';
import { connect } from 'react-redux';
import { saveItem } from '../actions/index';
import { withRouter } from 'react-router-dom';

class AddItem extends React.Component {
	
	render() {
		console.log(this.props);
		return(

	<form onSubmit={(event) => {
		event.preventDefault()

		const input = {
			name: event.target.itemName.value,
			price: event.target.itemPrice.value,
			description: event.target.itemDescription.value, 
			userEmail: this.props.currentUser.email
		}

		this.props.dispatch(saveItem(input))
		
		event.target.itemName.value = ''
		event.target.itemPrice.value = ''
		event.target.itemDescription.value = ''
	}}>
				<label>
					Item Name:
					<br />
					<input type="text" name="itemName" />
				</label>
				<br />
				<label>
					Price:
					<br />
					<input type="text" name="itemPrice" />
				</label>
				<br />
				
				<br />
				<label>
				Description:
					<br />
					<textarea type="text" name="itemDescription"/>
				</label>
				<br />
				<button>Submit</button>
			</form>
		)
	}
}

const mapStateToProps = state => ({
    currentUser: state.auth.currentUser
});
	
	export default withRouter(connect(mapStateToProps)(AddItem));

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

Answer 1

У этих двух вариантов есть плюсы и минусы, основные отличия:

Использование Redux Store:

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

Использование базы данных:

• данные сохраняются и могут быть извлечены в любое время
• выборка данных занимает некоторое время и требует вызова конечной точки + сервера
• гораздо более организованно

В общем случае используйте хранилище для временных данных, а базу данных - для хранения важных данных.На практике вы обнаружите, что используете эти методы взаимозаменяемо или даже оба одновременно.например, сохранение копии данных в хранилище перед отправкой в ​​вашу БД, чтобы данные по-прежнему были доступны для отображения.

Последний совет: https://hackernoon.com/shape-your-redux-store-like-your-database-98faa4754fd5