I'm new to fluxor and the redux/flux patterns it's based on. I'm currently working on a Blazor wasm project. I've chosen to use fluxor for state management. But I'm wondering how to handle the following scenario:
When the page gets loaded component 1 is filled with data from an API trough fluxor state management.
Component 1 is a list with items a user can select. When clicked said item should get retrieved from an API and get shown in full inside of component 3. And a text representing the active item is shown in Component 2.
Component 2 is a navigator that goes trough the list using simple back and next buttons. When clicking next then component 3 should retrieve the next item from the API and show the item in full. Component 1 then reflects this change by showing what item of the list is selected.
I do have actions etc to get the full item. I'm just not sure where to dispatch it from. Or how to make sure all components know what the active item is. With "pure" blazor I would do this all trough event callbacks, and handle the active item state locally. but that would defeat the point of fluxor.
If these components are all different parts of a single use-case (to browse client data) then I'd put them all inside a single feature.
Let's say you have the following contract classes coming from your API.
Note: Personally I'd give them private setters and use Newtonsoft for deserializing API responses. This will ensure they are immutable, and you can use them directly in state without having to create twin classes just to make your state immutable.
Your feature state might look something like this
The action you fire when your page is displayed doesn't need any payload
The reducer would clear the list and set the index to -1;
Your effect would go off to the server to grab the list, and then push to state via an action
Your reducer method for this action
Now you need to load data for the selected client whenever the
SelectedClientIndex
changes, or the list loads. You can have a single action just to set the selected index.You can now set the IsLoadingDetails to true, use an effect to fetch the data from the server (the ClientDetails), and then dispatch the result from the server to update your state.
The effect to get the data
Then finally update your state