Skip to main content


The third level of application partitioning, according to the purpose of the module in the code and implementation

โ”œโ”€โ”€ {slice}/
| โ”œโ”€โ”€ ui/ # UI-logic (components, ui-widgets, ...)
| โ”œโ”€โ”€ model/ # Business logic (store, actions, effects, reducers, ...)
| โ”œโ”€โ”€ lib/ # Infrastructure logic (utils/helpers)
| โ”œโ”€โ”€ config/ # Application configuration (env-vars, ...)
| โ””โ”€โ”€ api/ # Logic of API requests (api instances, requests, ...)

General rulesโ€‹

Each of the above segments represents the levels of abstractions that are familiar to us when developing software.

Each of the segments is responsible for its own scope, but all together - they form a single image of this slice and its logic, specifically:

  • its visual display (ui)
  • its business logic (model)
  • its auxiliary modules (lib)

Also, in rare cases, affecting:

  • its configuration (config)
  • its logic for working with API requests (api)

Each segment can be either a file or a directory - it depends on the complexity of the slice being implemented

That is, such options are also quite acceptable:

โ”œโ”€โ”€ ui.tsx
โ”œโ”€โ”€ model.ts
โ””โ”€โ”€ index.ts
โ”œโ”€โ”€ index.tsx
โ””โ”€โ”€ style.module.scss


UI representation of the module

It can contain inside:

  • Components of your UI framework (React, Vue, Angular, ...)
  • Canvas-Widgets
  • (any other ui view modules)


Complex UI for the layerโ€‹

โ”œโ”€โ”€ ui/
| โ”œโ”€โ”€ toolbar/
| | โ”œโ”€โ”€ title/
| | โ””โ”€โ”€ actions/
| โ”œโ”€โ”€ content/
| | โ”œโ”€โ”€ sort/
| | โ””โ”€โ”€ table/
| โ”œโ”€โ”€ index.tsx
| โ””โ”€โ”€ styles.module.scss
import { Layout } from "shared/ui";
import Toolbar from "./toolbar";
import Content from "./content";
import styles from "./styles.module.scss";

export const SomeForm = () => (
<Layout className={styles.root}>
<Toolbar className={styles.toolbar} />
<Content className={styles.content} />


Business logic of the module

May contain:

  • The logic of creating and updating a mini-store for this slice
    • In the effector world: createStore + createDomain
    • In the redux world: createSlice
  • A list of events processed by the parent slice model and updating its state
    • In the effector world: events
    • In the redux world: actions + dispatch
  • List of asynchronous side effects, for loading data and other asynchronous operations
    • In the effector world: effects
    • In the redux world: thunks / sagas / epics
  • List of selectors/contracts/hooks for using the slice state
    • In the effector world: useStore, ...
    • In the redux world: useSelector, selectors


Auxiliary libraries

It usually contains a set of utilities that help writing logic and are distributed in groups, i.e. separate libraries.


Logic of interaction with the API

Usually contains

  • instances for working with different external APIs
  • methods / factories for calling specific endpoints

In rare cases (react-query / graphql), the queries themselves may lie near the place of use

  • But most often recommended place the API segment in the 'shared' layer to reduce the number of logic entanglements

At the same time, this segment can be written manually or generated using the API scheme

  • For example, using openapi-generator, swagger-codegen


export class UserApi {
constructor(config) {...}
getList(params: GetListParams): Promise<User[]> {...}
import { userApi } from "shared/api"

// API instances can be created
// both at the place of use and in the API segment itself
// const userApi = new UserApi();

export const getUserListThunk = createAsyncThunk("...", (params) => {
return userApi.getList(params);


Application configuration module and its environment

It usually contains the application configuration and methods for working with it


Using environment variablesโ€‹

The implementation depends on the project and the team, here is just one of the options

export const isDevEnv = NODE_ENV === "development";
export const OAUTH_TOKEN = getEnvVar("REACT_APP_OAUTH_TOKEN");
import { OAUTH_TOKEN, isDevEnv } from "shared/config";

export const OAuthProvider = () => (

See alsoโ€‹

WIP: Over time, articles on each abstraction will appear