This page give you an overview of Telar Scoial UI and things are working together in frontend.
Find Telar Social UI repository here.
- React Components: We devided react components components in three parts. The component which is stateless, we keep in
src/containersincluding master components which we use router to load these components. The
src/componentsin including state components.
- State Management: The
src/storeincluding directories managing redux store states. The
store/actionsincluding actions creators. The
store/reducersincluding redux reducers. The
store/sagasincluding saga files from redux-saga to manage side effects such as asynchronous things like data fetching. contains example documentation files written in Markdown.
- Web API Service: The
website/blog-examples-from-docusaurusdirectory contains examples of blog posts written in markdown.
- Core Management: We keep the
src/coreas a most stable layer that includes
core/domainincluding Web API Service class entities,
core/factoriesincluding factory interface and class for Web API Service classes and
core/servicesincluding main interfaces for Web API Service in
To manage states in frontend side, Telar Social has a simple implementation of Redux. Follow above diagram
Components emit an action from
If the action is a direct change on state in Redux Store
Reducers will execute that action. If the action is async or needs to call an async web api
Sagas will execute that action.
Sagas is a layer that manage side effects. Using redux-saga library we can handle
async actions easier.
Asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, simple to test, and better at handling failures. redux-saga doc
Sagas layer using IOC container to access the
Web Service API. When async action is done,
saga will call another action to change respective state in (https://redux.js.org/api/store).
Web Service API layer. With the least changes are able to have different solutions for backend such as server-less, docker, and etc.
⭐️ This page needs help. Please help with your contribution. To start click on edit button.