How to organize a multi-panel application in react + redux?

Question

JavaScript

Hello
, I'm trying to write a mobile app using React+Redux. To simplify, it looks like this

<Slides>
    <Slide>
        <OrderForm>
              <Button>настроить параметр 1</Button>
              <Button>настроить параметр 2</Button>
        </OrderForm>
    </Slide>
</Slides>

When you click the Order button, a separate page opens (in fact, just a slide from above),

<Slides>
    <Slide>
        <OrderForm>
              <Button>настроить параметр 1</Button>
              <Button>настроить параметр 2</Button>
        </OrderForm>
    </Slide>
    <Slide>
        <OrderDetail1>
              <input/>
        </OrderDetail1>
    </Slide>
    <Slide>
        <OrderDetail2>
              <input/>
        </OrderDetail2>
    </Slide>
</Slides>

I did not come up with anything better than how to make an action

export const addSlide = (content) => {
  return {
     type: 'ADD_SLIDE',
     payload: content
  }
}

Hang it on Button.onClick, and in the Slides reducer, just add a new slide with such content.
Something like this

<Button onClick={() => {
this.props.addSlide(<OrderDetail1 {...somedata}/>)
}}>настроить параметр 1</Button>

The problem is that such a record will not be re-rendered when the data in the OrderDetail reducers changes.
How to be?
Previously, in the Slides component, I processed the current value through constants like
this

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>

But this is very inconvenient to maintain, and the code in the Slides component was too big.
Please tell me, maybe I have a fundamentally wrong approach. Now I'm thinking of rendering the component into some kind of invisible div and passing a link to it.
UPD. According to the TOR, all slides should be visible, i.e. both the form and order details are rendered simultaneously. By design, one slide covers the other, but part of the first is visible from the side

Answer 1

That's right, you have a fundamentally wrong approach. React-router is specifically used for this.

Answer 2

In general, the mistake was in understanding the work of React + Redux, and in particular that
there is no moment of rendering this Orderdetail, and it must be redrawn in its component. this can be done by attaching your own reducer to it, which will react to changes and cause a redraw.
This is not a solution, the question itself is not correct. Everything works there if you correctly configure the reducer of those components that are called in addSlide