Complex State Update with API Call to Persist Data

[jperna7254]

I am creating a quoting tool which has quote items and groups of quote items. I am trying to implement the feature that allows the user to modify the order of the groups or individual quote items. There is a decent amount of complexity sometimes with moving items in and out of groups and to the beginning and end of the quote. As a result I think I should move some of the complexity to an EffectMethod, and then dispatch an action that has just the updated data so reducing the old state and the action together is simple in the ReducerMethod. However, I also need to persist the changes made to indices and groupIds of the quote items to the database through an API call, which will inevitably be asynchronous. I would also love to have a snappy optimistic update of the state done right when the user tries to move the row, rather than wait for the success/failure of the API call.

With these issues the only thing that seems reasonable is to dispatch a MoveRowIntentAction, have a EffectMethod(typeof(MoveRowAction)), with that effect method doing the indexing swapping logic then dispatching a MoveRowAction and sending a fire and forget API call to persist the change, then having a ReducerMethod(typeof(MoveRowAction)).

The only thing that worries me about this solution is the fire and forget API call. It also seems convoluted so I wanted to post about it and see if anyone has had a similar problem they found an elegant solution to. Thank you all!

Edit: i am now thinking doing an initial synchronous effect to figure out the index changes would work for this. Then dispatch the update action where the reducer can respond immediately then another effect can do the api call in the background.

[mrpmorris]

I'm not sure I follow, but Effects should really be for talking to external sources rather than coordinating stuff.

I would do this

1. Dispatch a MoveItemAction
2. Reducer updates the UI as expected
3. Effect makes a call out to the server
4. If the server call succeeds, do nothing
5. If the server call fails, the effect dispatches a MoveItemFailedAction which tells the UI to put it back where it was

var originalParent = item.ParentId;
var response = await Server.MoveItemAsync(item.Id, action.NewParentId);
if ( the response indicates a failure)
  dispatcher.Dispatch(new MoveItemFailedAsync(item.Id, originalParent);

If you wish, you could have both actions descend from a base or implement a common interface and have your reducer act on that, so you don't have to write the same reducer code twice.

[jperna7254]

I am essentially doing exactly what you described with one additional level of complexity. When I change the index of one item in my data grid the indices of the other items changes (i.e. maybe I moved an item with index 0 all the way to the end of the list). As a result of this, I actually need access to the part of the feature state that has all the items in the list, and I need to determine all of the items' new indices. So the decision I have to make is do I put the code that does the index change determination work in the UI component that receives the user input to move the item, or do I put that code in an EffectMethod, or do I put it somewhere else I haven't thought of yet. I also have a feature that allows the user to move groups of items up or down, which also will cause most of the indices of the items to change, so it isn't just one feature that has this constraint.

This is what I have currently to make this work.

1. User clicks icon button in data grid item
2. Dispatch MoveItemAction(int itemId, MoveMaterial moveMaterial) - (MoveMaterial is an enum for UpOne, DownOne, ToTop, ToBottom)
3. EffectMethod for MoveItemAction accesses current State.Value.Items and a service class which figures out the indices of the items after the item move then dispatches MoveItemUpdateAction(Dictionary<int, int> indexMap)
4. Reducer reduces action to update UI, effect method sends API request to persist changes to db

Do you think this is an incorrect usage of the effect method? It feels philosophically wrong to put the complex logic of the index changes determination in the code behind of the UI component, but it also doesn't feel 100% right to put it in an EffectMethod. It is also much easier to unit test the EffectMethod than the code behind of the UI component that receives the icon button click event.

[jperna7254]

From the Redux world it seems this situation can also be handled through an "action creator." However, it seems most of the time the action creators are not accessing the current state to do any complex logic to initialize the action. For my situation, usage of an action creator would look like this I think

1. User clicks icon button
2. Code behind method triggered

private void MoveItem(int itemId, MoveMaterial moveMaterial)
{
    var action = ActionCreator.CreateAction(itemId, moveMaterial);
    Dispatcher.Dispatch(action);
}

6. Reducer reduces, items move around in the data grid. Effect method sends API call to persist indices in database.