kavi4
@kavi4
Web developer

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

Я только разбираюсь с Rect в связке с Redux и закономерно возникают вопросы, на которые сложно найти ответ в интернете. Вопрос состоит в том, что есть несложная структура данных в redux по типу:
{
	products : {
		productList1:[{Product},{Product},{Product}],
                productList2:[{Product},{Product},{Product}],

	},
	contacts : {
		phone:'512-421-3940',
		email:'email@support.com',
		address:'1739 Bubby Drive',
		content: "this is contacts page",
	},
	notFound:{},
}

т.е. есть несколько страничек, на странице products захотелось мне два списка продуктов сделать, получается вот такой компонент :
import React     from 'react';
import {connect} from 'react-redux';
import './style.css';
import ProductItem from './productItem';

const ProductList = ({productList})=>{

	let products = productList.map((item,index)=>{
		return(
			<div class="col-sm-4">
				<ProductItem product={item} key={index} />
			</div>
			);
	});
	return(
	<div class="product-list">
		<div class="container">
			<div class="row">
				<div class="product-list__header">
					<h2 class="product-list__header__title">Pricing Table</h2>
				</div>
				{products}
			</div>
		</div>
	</div>
	);
}
export default ProductList;

Как передать каждому списку начальное состояние я понял, а как сделать так , чтобы один редюсер обрабатывал два списка нет
И тут я понял что не понимаю как хранилище соединяетсяс редюсерами и как этот redux работает, а описания этих процессов очень скудны.
В контексте react и локального стейта все просто, но когда выводишь это состояние в redux возникает подобное недопонимание.
  • Вопрос задан
  • 111 просмотров
Пригласить эксперта
Ответы на вопрос 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Внутри connect функции вы подписываетесь на кусочек вашего store (то есть, на кусочек всего состояния вашего приложения). Обычно это выглядит так:

const mapStateToProps = state => ({ // state = все ваши редьюсеры, то есть тут лучше было бы писать store, но так уж поевелось..
  campaigns: state.campaigns, // компонент подписывается только на state.campaigns (то есть только на редьюсер campaigns)
});
connect(mapStateToProps/*, mapDispatchToProps*/)(CampaignsList) // происходит коннект, mapDispatshToProps - это для "прокидывания" создателей действий (action creator)


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

В скором времени будет вебинар (вход свободный) по основам редакса, думаю вы к тому времени уже разберетесь, но тем не менее заходите (vk / telegram, сайт)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы