'Is this example a proper way to use Redux to trigger a common async call, that returns data to be placed into the store?
Is this example a proper way to use Redux to trigger a common async call, that returns data to be placed into the store? Suppose I have such React component hierarchy:
(ParentComp)
- (Several more levels of comp) - (OrderList)
- (Several more levels of comp) - (OrderDetails)
- (Several more levels of comp) - (Refresh Button)
Selecting an order in the list = OrderDetails async GET details with a new id. Clicking Refresh = OrderDetails async GET details with the current id. So to avoid traversing the many levels of comps to communicate between the siblings, I used "createAsyncThunk, createSlice, connect" from "redux-toolkit", in summary:
- OrderList: call dispatch "Refresh" with a new id
- RefreshButton: call dispatch "Refresh" with null
- createAsyncThunk "Refresh": make an axios GET call to return response in 'then' clause. (also if the argument was null, it get the current id from store.getState().orderSlice.order.id)
- createSlice: in extraReducer there is a case for Refresh.fulfilled that put the payload to state.order
- OrderDetail: render stuff by mapStatesToProps on state.order
It kind of worked, but is it proper to do so? Like, overcomplicated? performance leak? slow to render? Thanks.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|