API actions can be split up into a couple of cases:
- Optimistic Update - state is predetermined and server interaction is to mantain consistency
- Pull Data - state is unknown and we need the server interaction to retrieve or refresh data
// OPTION A - Current Setup | |
// Logic/Control in Action | |
Component.componentWillMount = function(){ | |
AccountActions.updateAccount(data) | |
} | |
Client.updateAccount = function(data){ | |
apicall(data, function(data){ | |
AccountServerActions.updateAccount(data) | |
}) | |
} | |
AccountActions.updateAccount = function(data){ | |
Dispatch(ACCOUNT_UPDATE_APP, data) | |
Dispatch(ACCOUNT_UPDATE_PENDING, data) | |
Client.updateAccount() | |
} | |
AccountServerActions.updateAccount = function(data){ | |
Dispatch(ACCOUNT_UPDATE_SERVER) | |
} | |
// OPTION B - Client Centric | |
// Logic/Control in Client | |
Component.componentWillMount = function(){ | |
Client.updateAccount(data) | |
} | |
Client.updateAccount = function(data){ | |
AccountActions.updateAccount(data) | |
apicall(data, function(data){ | |
AccountServerActions.updateAccount(data) | |
}) | |
} | |
AccountActions.updateAccount = function(data){ | |
Dispatch(ACCOUNT_UPDATE_APP, data) | |
Dispatch(ACCOUNT_UPDATE_PENDING, data) | |
Client.updateAccount() | |
} | |
AccountServerActions.updateAccount = function(data){ | |
Dispatch(ACCOUNT_UPDATE_SERVER) | |
} | |
// OPTION C - Component Centric | |
// Logic/Control in Component | |
Component.componentWillMount = function(){ | |
AccountActions.updateAccount(data) | |
Client.updateAccount(data) | |
} | |
Client.updateAccount = function(data){ | |
apicall(data, function(data){ | |
AccountServerActions.updateAccount(data) | |
}) | |
} | |
AccountActions.updateAccount = function(data){ | |
Dispatch(ACCOUNT_UPDATE_APP, data) | |
Dispatch(ACCOUNT_UPDATE_PENDING, data) | |
Client.updateAccount() | |
} | |
AccountServerActions.updateAccount = function(data){ | |
Dispatch(ACCOUNT_UPDATE_SERVER) | |
} |