Test Project Example (React.js + Archux)
These are the depersonalized fragments from our real small project
It is just for acquaintance with our approach and unidirectional data flow organization with react.js and archux (our little flux-implementation)
We believe that for medium and small projects with little interactivity there is no need for flux, mobx or redux with thunk or sagas
It is enough to realize its simple storage (observer) and dispatcher, which will work strictly in the unidirectional dataflow style (without callbacks in thenable and middlewares)
Bad (Non Unidirectional Dataflow):
/** * Fetch active projects * * @returns */ { // handle properly in reducer actions ; }
Good (Unidirectional Dataflow):
/** * Fetch active projects * * @returns */ { // handle properly in reducer actions; } /** * Check next container properties * * @param * @param * * @returns */ { const activeProjects = nextProps; // do something with response here }
Diagram
Infrastructure
actions
- contains entity action functions, specific for archux
/** * Perform getActiveProjects action * * @returns */ { dispatcher;}
-
services
- contains different services for local storage, api, app navigation ant etc. -
reducers
- contains pure functions for handling actions and updating store state -
store
- archux implementation (similar to flux and redux)
Component Types
We are using pure, classic and functional react components and splitting they on following types:
-
/components/_common
- fundamental components (like Buttons, Checkboxes, Selects); -
/components
- specific components for domain and project (like DataGrids, Sliders, Panels); -
/containers
- top components which works with data and subscribed to store (Pages, Modals);
Testing
We are trying to test all aspects from components to services through reducers and actions:
-
__tests__
- unit tests (using enzyme) -
e2e
- end-to-end and functional tests (using protractor and page-object pattern)
Documentation
We are using beautiful tool for that - JSDoc