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

Question

[Anton Dyrkov]

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

{
	products : {
		productList1:[{Product},{Product},{Product}],
                productList2:[{Product},{Product},{Product}],

	},
	contacts : {
		phone:'512-421-3940',
		email:'[e-mail]',
		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 возникает подобное недопонимание.

Answer 1

[Максим]

Внутри connect функции вы подписываетесь на кусочек вашего store (то есть, на кусочек всего состояния вашего приложения). Обычно это выглядит так:

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

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

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

Comments

[Anton Dyrkov]

через connect получается подключить к одному компоненту только одно состояние (я удивлен что так построена архитектура, что каждая структура данных в store связана со своим редюсером, чтобы создать второй список надо сделать второй редюсер),что не дает сделать их более одного, я лучше понял бы на примере.