How to properly structure reducers to split logic while having a global manager (multi step wizard)

[stevebeauge]

I want to build a complex multistep wizard. Each steps may contains a bunch of server side query, that depends on previous input.

I started to work with redux toolkit to reduce complexity.

Because each step can be complex, I think about creating one slice per screen and on slice to rules to navigation logic.

For example, imagine I have these 3 steps in my wizard (simple use case to illustrate the concept):

1. Step 1: provide a way to select a customer. Gather its ID and details

• only when a customer is selected the "next button" should be enabled

2. Step 2: Display a list of order related to the customer selected on step 1

• only when an order is selected the "next button" should be enabled

3. Step 3: recap of customer and order details

• a finish button is here to trigger some action

In this case, I can imagine writing a customerSlice and an orderSlice to deal with step details.

What is confusing for me, is how to deal with the highest level of state. Because the global wizard orchestration need to access data from every steps, I don't understand how to deal with that. I've read about the combineReducers to create a tree of reducers, but I still don't get how to combine data from others reducers to decide the state of the wizard navigation.

I'm even wondering if it should be in the global state, or it should be moved to some logic within a container component that will be able to read from all slices, or dispatch any action.

I'd appreciate any help