High Level Architecture

High Level Architecture

Project structure and packages

Detailed below is the simplified project structure used and npm packages used to achieve the architecture above.

State Store

• redux for centralised state management.

Container

• react-redux as the helper binder between Redux and React.
• redux-thunk middleware to control the dispatching of Redux actions, based on API response.

View

• react to build the SPA.
• react-router for client-side routing.
• axios for sending asynchronous HTTP requests to the WediumAPI.
• material-ui for styled components.

Project structure (Simplified)

  /apis           The API service that defines axios http calls to the WediumAPI.

  /components     Calls the thunk to make an API call and modify and keep track 
                  of the state.

  /redux        

    /actions       Defines the different action types which modify the state.

       /thunk      Makes an API call and depending on the response, dispatches the
                   appropriate action.

    /reducers      Performs the modification on the state based on the action received.

    store.js       Stores the application state.