It is a project that is part of lazy-stock-screener which is a full-stack micro-service prototype product. Redux for global state, while Hooks for page level (or local level). Leverage API facade design pattern and React Hooks to built a MVP pattern in React.
The full product is still under constructing and the full product is committed to gitlab. I only share part of the use-case in order to demonstrate how I built up the front-end.
- SPA with React Router
- React Router Config manage router in one place.
- Fully controlled Webpack tool without CRA.
- SSR in prod env without Next.js
- Redux for global state while hooks take care of local/page level state
- Lazy Load in page level component, it means only necessary components are loaded.
- Update URL and Page info based on search result
- Auto complete provide suggestion key word
- BreadCrumb based on router
- Filtering and Sorting of key factors.
- Containerized
- MVP pattern + API Facade structure
-
References Client-Side Architecture Basics [Guide]
-
Redux for global state while Hooks for local state
- Ref. React's useReducer Hook vs Redux
- Use useState for basic and simple/small size applications.
- Use useState + useReducer + useContext for advanced/medium size applications.
- Use useState/useReducer + Redux for complex/large size applications.
- Ref. React's useReducer Hook vs Redux
- Models (data-fetching + state management can be replaced by Apollo if needed.)
- data-fetching
- DTO → Define any payload as data-transfer-object
- API Services → actual API service that calling axios in here.
- 解決 redux-thunk 的問題： 样板代码过多: 与 redux 本身⼀样,通常⼀个请求需要⼤量的代码,⽽且很多都是重复性质的 耦合严重: 异步操作与 redux 的 action 偶合在⼀起,不⽅便管理 功能孱弱: 有⼀些实际开发中常⽤的功能需要⾃⼰进⾏封装
- state-management
- state-models → define reducer state
- State Reducers → general redux reducer
- use-case
- Login
- LoginActionCreators → action in redux
- LoginActionNames → define redux name
- LoginDTO → define request/response data transfer object
- LoginLogic → API dispatching logic
- LoginUseCase → Return a redux-thunk and pass it to presenter for dispatching
- Login
- data-fetching
- Pages → Assembling static components together and decorate with VM model
- Components
- Page → any page level component as an actual web page.
- Tabs → subcomponent that constructing a page.
- Sections → breaking down as smaller compoent
- Layouts → define larger scale page layout and SEO setting
- routes → define overall router paths also including authorized route.
- Components
- Presenters → Define View Models at global or local state management
- View Model defines various kind of HOC related to API fetching or local hooks dispatching.
- Redux using API facade pattern
- Local state reducer
- Local state DTO
- Views
- Dump → Put all UI components in here.
- Logic → Directly connect UI component to global state and use hooks pattern. These components eventually become a standalone component with their inside state.
- dev
- Webpack
- Typescript
- JSON server
- React Hooks
- React-Router
- Redux + Redux-thunk
- Material UI
- D3
- Axios
- Sensitive data handler: dotenv
- Express.js
HOST=0.0.0.0
PORT=8080
STOCK_DEV_VER=v1
STOCK_DEV_HOST=http://localhost
STOCK_DEV_PORT=5000
STOCK_PROD_VER=v1
STOCK_PROD_HOST=0.0.0.0
STOCK_PROD_PORT=5000
-
Model Part Idea
-
React SSR
-
Loadable-component
-
Webpack
- splitChunks
- Code splitting React components with TypeScript and NO Babel