Здравствуйте
Пробую писать на React+Redux мобильное приложение. Если упростить то выглядит так
<Slides>
<Slide>
<OrderForm>
<Button>настроить параметр 1</Button>
<Button>настроить параметр 2</Button>
</OrderForm>
</Slide>
</Slides>
При нажатии кнопки Заказать, открывается отдельная страница(по факту просто слайд сверху),
<Slides>
<Slide>
<OrderForm>
<Button>настроить параметр 1</Button>
<Button>настроить параметр 2</Button>
</OrderForm>
</Slide>
<Slide>
<OrderDetail1>
<input/>
</OrderDetail1>
</Slide>
<Slide>
<OrderDetail2>
<input/>
</OrderDetail2>
</Slide>
</Slides>
Я не придумал ничего лучше, как сделать action
export const addSlide = (content) => {
return {
type: 'ADD_SLIDE',
payload: content
}
}
Повесить его на Button.onClick, а в редуторе Slides просто добавлять новый слайд с таким содержимым.
Как-то так
<Button onClick={() => {
this.props.addSlide(<OrderDetail1 {...somedata}/>)
}}>настроить параметр 1</Button>
Проблема в том, что такая запись не перерендерится при изменении данных в редуктораях у OrderDetail
Как быть?
Раньше я делал в компоненте Slides обруботку текущего значения через константы
Типа того
let slides = this.props.slides.map((slide, index) => {
let content;
switch (slide.type) {
case 'order_detail1':
content = <OrderDetail1/>
break;
....
}
return <Slide>{content}</Slide>
})
...
<Slides>{slides}</Slides>
Но это очень неудобно поддерживать, и код в компоненте Slides был слишком большой.
Подскажите пожалуйста, может у меня в корне не верный подход. Сейчас думаю рендерить компонент в какой-то невидимый div и передавать ссылку на него.
UPD. По ТЗ все слайды должны быть видны, т.е. одновременно рендерятся и форма и детали заказа. По дизайну так, один слайд закрывает другй но при этом часть первого видно сбоку
Средний