Handle request call responses in react-redux app to avoid using callbacks - reactjs

Question

This is rather a design question, but I'm wondering if there's a best practice to handle such situations.
I have a react redux app. The app state structure looks like this:
{
groups: {gid1: group1, gid2: group2, ....},
expenses: {eid1: expense1, eid2: expense2, ...},
//.... the rest
}
The NewGroup component is aimed to create a new group. If the create request (ajax request to the backend) is successful , it is added to the list of groups in the app state. The NewGroup, which is a modal, is closed and list of groups updates.
Though the NewGroup component should not be closed if the request was not successful.
The main question is: Should I incorporate the request status (if it is successful or unsuccessful, the error message in the latter case, if the result is returned or not, etc.) in the app state ? This is where I am really doubtful because it makes the app state very ugly, large and in some cases it is incapable of handling some situations, in this case: Creating a new group.
Let's say I add the response status code and error message to the app state:
{
groups: {
newGroupId1: {
data: newGroupData1,// null in case it was not successful
isLoading: true/false, // if the call is returned or not
errorFetching: message1
}
}
}
On the second unsuccessful create request to the backend, it is not possible to distinguish between the previous and the current calls, as both of them have errorFetching and similar isLoading values. (for example both have "No group found" for errorFetching and "false" for isLoading)
What is the best practice to distinguish between the status of the request calls and the real data in the app state when redux is being used ?
Update 1
This is the reducer:
import { FETCH_GROUPS_SUCCESS, FETCH_GROUPS_ERROR, CREATE_GROUP_SUCCESS, CREATE_GROUP_ERROR, DELETE_GROUP, FETCH_GROUP_SUCCESS, FETCH_GROUP_ERROR } from '../actions/creators';
export const FULL_GROUP = 'full_group';
export const SNIPPET_GROUP = 'snippet_group';
const INITIAL_STATE = {
data: null,
isLoading: true,
errorFetching: null
};
export default function(state=INITIAL_STATE, action) {
switch(action.type) {
case FETCH_GROUPS_SUCCESS:
return {
data: _.zipObject(_.map(action.payload, group => group.id),
_.map(action.payload, group => ({
data: group,
isLoading: true,
errorFetching: null,
mode: SNIPPET_GROUP
}))
),
isLoading: false,
errorFetching: null
};
case FETCH_GROUPS_ERROR:
return {
data: null,
isLoading: false,
errorFetching: action.payload.error
};
case FETCH_GROUP_SUCCESS:
return {
data: {...state.data, [action.payload.id]: {
data: action.payload,
isLoading: false,
errorFetching: null,
mode: FULL_GROUP
}},
isLoading: false,
errorFetching: null
};
case FETCH_GROUP_ERROR:
const stateWithoutId = _.omit(state, action.payload.id);
return {
data: {...stateWithoutId},
isLoading: false,
errorFetching: null
};
case CREATE_GROUP_SUCCESS:
debugger;
//TODO: how to let the NewGroup know that a group was created successfuly ?
return { ...state, [action.payload.id]: {
data: action.payload,
isLoading: true,
errorFetching: null,
mode: SNIPPET_GROUP
}};
default:
return state;
}
}
This is the action creator:
export function groupsFetchSucceeded(response) {
return {
type: FETCH_GROUPS_SUCCESS,
payload: response
}
}
export function groupsFetchErrored(errorWithId) {
return {
type: FETCH_GROUPS_ERROR,
payload: errorWithId
}
}
export function groupCreateSucceeded(group) {
return {
type: CREATE_GROUP_SUCCESS,
payload: group
}
}
export function groupCreateErrored(errorWithId) {
return {
type: CREATE_GROUP_ERROR,
payload: response
}
}
export function groupFetchSucceeded(groupData) {
return {
type: FETCH_GROUP_SUCCESS,
payload: groupData
}
}
export function groupFetchErrored(errorWithId) {
//handle the error here
return {
type: FETCH_GROUP_ERROR,
payload: errorWithId
}
}
This is the component. PLEASE! disregard the fact that this is a redux form, I don't care it's a redux form or not, I'm looking for a general idea. You can assume that it is a react-redux component with mapStateToProps and mapDispatchToProps and other related stuff.
import { createGroup } from '../../actions';
import { validateName, validateDescription } from '../../helpers/group_utils';
import { renderField, validate } from '../../helpers/form_utils';
const validators = {
name: validateName,
description: validateDescription
};
class NewGroup extends Component {
_onSubmit(values) {
this.props.createGroup(values);
}
render() {
const { handleSubmit } = this.props;
return (
<div>
<form onSubmit={handleSubmit(this._onSubmit.bind(this))}>
<Field name="name" label="Name" type="text" fieldType="input" component={renderField.bind(this)}/>
<Field name="description" label="Description" type="text" fieldType="input" component={renderField.bind(this)}/>
<button type="submit" className="btn btn-primary">Create</button>
<button type="button" className="btn btn-primary" onClick={() => this.props.history.push('/group')}>Cancel</button>
</form>
</div>
);
}
}
export default reduxForm({
validate,
//a unique id for this form
form:'NewGroup',
validators
})(
connect(null, { createGroup })(NewGroup)
);

Answer 1

The tricky part of your problem is that while you want to record all request statuses in redux's state, the number of requests might increase exponentially and take a lot of state's volume if not being handled well. On the other hand, I don't think distinguishing request data and state data is a big deal: you only need to separate them in state:
{
groups: {gid1: group1, gid2: group2, ....},
groupRequests: {grid1: request1, grid2: request2, ...},
expenses: {eid1: expense1, eid2: expense2, ...},
...
}
where each group data contains:
{
data: groupData,
lastRequestId: grid // optional
}
and each group request data contains:
{
groupId: gid,
isLoading: true/false,
errorFetching: message
}
When new request is sent, you update in groupRequests and track it there; NewGroup component only need to hold groupId to find the latest request fired and look after its status. And when you need to know the status of previous requests, take them from the list.
Again, the problem with this approach is that most of the data in groupRequests is one-time-used, meaning at some point (e.g. when NewGroup component closes), you don't even need it anymore. So make sure that you properly throw old request status away before groupRequest grows too big.
My advice is that when dealing with redux state, try to normalize it properly. If you need an 1-n relationship (group data and request data of creating group), break it down further instead of grouping them together. And avoid storing one-time-used data as much as possible.