High level app architecture

High-level app architecture

Prerequisites

• https://redux.js.org/advanced/async-actions
• https://redux.js.org/advanced/middleware#seven-examples
• https://redux-actions.js.org/

Async request dataflow overview

1. Dispatch action with promise (defined using redux-actions)
2. Redux middleware handles promises (see readyStatePromise)
3. Redux reducers update state based on promise result actions
   • Completed requests have { requestStatus: { success: true, message: 'myRequest.success' } in state.
   • In-flight requests have { formLoader: true } in state.
4. React components are used to render UI. E.g. RequestStatusBox can be used to display requestStatus from Redux state.