Architecture
(Code organization for the client)
Bootstrap
The main file is src/App.jsx
, it is used both by SSR (expressjs http server) and the browser.
The file src/index.js
is only used by the browser.
Routes
The routing is declared in src/modules/routing
and indicates which «Scene» to render.
All the Scene are in src/scenes/
.
e.g src/scenes/Timeline
Layouts
The layouts represent the page according to the context, the login form has a different layout as the timeline…
e.g. src/layouts/Settings
Modules
The business logic is in those modules: src/modules/
.
It is organized by domain and are not directly coupled so a module can be completely mocked or replaced.
e.g. src/modules/contacts
Inside a module
A module has always the same architecture but all are optionnal except the index:
index.js
: provide an access to the public API of the moduleactions/
: redux actions e.g.requestContacts.js
assets
: images, fonts…components/
: react components (can be nested)contexts
: react contextshoc
: react higher order componentshooks
: react hooksmodels
: base class of entities e.gsrc/modules/message/models/Message.js
selectors/
: redux selectorsservices/
: utility pure functions. Services are not coupled to redux nor react.
Redux actions
The API of a redux action is a function that can return an object that redux can read, a function or a Promise (cf. thunk and Promise middlewares).
e.g
// this a simple action cf. https://redux.js.org/introduction/getting-started#basic-example
const requestContactsBase = {
type: 'requestContacts',
payload: {},
};
// this is a «thunk action» that can chain multiple actions cf. https://github.com/reduxjs/redux-thunk
export const requestContacts = () => (dispatch) => dispatch(requestContactsBase);
Store
This the implementation of redux using «Ducks: Redux Reducer Bundles», a modular organization of redux
e.g. src/store/reducer.js
Components
Each reusable component without business logic is in src/components/
.
e.g. src/components/Button
Other «main» directories
Those directories requires to be refactored because of the legacy code that can be in there. The best example is src/services/
that should be splitted in multiple modules.