Merge pull request feature-sliced#378 from feature-sliced/bugfix/EDITORSHIP-377-critical-mistakes-with-effector

EDITORSHIP-377: Fix critical mistakes with effector

Author: azinit

website/i18n/en/docusaurus-plugin-content-docs/current/concepts/low-coupling.md

@@ -103,25 +103,25 @@ The page data model will be organized as a **composition of features and entitie
 > However, the implementation in the form of a factory is optional - the feature may depend on the underlying layers and directly
 
 ```ts title=pages/main/model.ts
-import { userStore } from "entitites/user"
-import { conversationStore } from "entities/conversation"
-import { contactStore } from "entities/contact"
+import { userModel } from "entitites/user"
+import { conversationModel } from "entities/conversation"
+import { contactModel } from "entities/contact"
 
 import { createMessageInput } from "features/message-input"
 import { createConversationSwitch } from "features/conversation-switch"
 
 import { beautifiy } from "shared/lib/beautify-text"
 
 export const { allConversations, setConversation } = createConversationSwitch({
-    contacts: contactStore.allContacts,
-    setConversation: conversationStore.setConversation,
-    currentConversation: conversationStore.conversation,
-    currentUser: userStore.currentUser
+    contacts: contactModel.allContacts,
+    setConversation: conversationModel.setConversation,
+    currentConversation: conversationModel.conversation,
+    currentUser: userModel.currentUser
 })
 
 export const { sendMessage, attachFile } = createMessageInput({
-    author: userStore.currentUser
-    send: conversationStore.sendMessage,
+    author: userModel.currentUser
+    send: conversationModel.sendMessage,
     formatMessage: beautify
 })
 ```

website/i18n/en/docusaurus-plugin-content-docs/current/concepts/public-api.md

@@ -64,9 +64,9 @@ The public API must **control access** to the contents of the module
     + import { AuthForm } from "features/auth-form"
     ```
 
-### 2. Anti-fragility
+### 2. Sustainability for changes
 
-The public API should be **anti-fragile** - resistant to changes inside the module
+The public API should be sustainable for changes inside the module
 
 - Breaking changes in the behavior of the module are reflected in the change of the Public API
 
@@ -102,34 +102,34 @@ The public API should facilitate **easy and flexible integration**
 
     ```ts title=features/auth-form/index.ts
     export { Form } from "./ui"
-    export * as store from "./model"
+    export * as model from "./model"
     ```
 
     ```ts title=features/post-form/index.ts
     export { Form } from "./ui"
-    export * as store from "./model"
+    export * as model from "./model"
     ```
 
     ```diff
-    - import { Form, store } from "features/auth-form"
-    - import { Form, store } from "features/post-form"
+    - import { Form, model } from "features/auth-form"
+    - import { Form, model } from "features/post-form"
     ```
 
 - **Good:** the collision is solved at the interface level
 
     ```ts title=features/auth-form/index.ts
     export { Form as AuthForm } from "./ui"
-    export * as authFormStore from "./model"
+    export * as authFormModel from "./model"
     ```
 
     ```ts title=features/post-form/index.ts
     export { Form as PostForm } from "./ui"
-    export * as postFormStore from "./model"
+    export * as postFormModel from "./model"
     ```
 
     ```diff
-    + import { AuthForm, authFormStore } from "features/auth-form"
-    + import { PostForm, postFormStore } from "features/post-form"
+    + import { AuthForm, authFormModel } from "features/auth-form"
+    + import { PostForm, postFormModel } from "features/post-form"
     ```
 
 ##### Flexible use
@@ -144,8 +144,9 @@ The public API should facilitate **easy and flexible integration**
 - **Good:** the "user" of the feature gets access to the necessary things iteratively and flexibly
 
     ```diff
-    + import { authFormStore } from "features/auth-form"
-    + dispatch(authFormStore.actions.updateUserDetails(...))
+    + import { authFormModel } from "features/auth-form"
+    + dispatch(authFormModel.effects.updateUserDetails(...)) // redux
+    + authFormModel.updateUserDetailsFx(...) // effector
     ```
 
 ##### Resolution of collisions
@@ -172,7 +173,7 @@ Name collisions should be resolved at the level of the public interface, not the
 
     ```ts title=features/auth-form/index.ts
     export { Form as AuthForm } from "./ui"
-    export * as authFormStore from "./model"
+    export * as authFormModel from "./model"
     ```
 
      ```ts title=features/post-form/model.ts
@@ -181,7 +182,7 @@ Name collisions should be resolved at the level of the public interface, not the
 
     ```ts title=features/post-form/index.ts
     export { Form as PostForm } from "./ui"
-    export * as postFormStore from "./model"
+    export * as postFormModel from "./model"
     ```
 
 ## About re-exports

website/i18n/en/docusaurus-plugin-content-docs/current/get-started/quick-start.md

@@ -509,7 +509,7 @@ const TasksListPage = () => {
    * @remark is a bad practice in the effector world and is presented here-just for a visual demonstration
    * It is better to fetch via event.pageMounted or reflect
    */
-  useEffect(() => taskModel.effects.getTasksListFx(), []);
+  useEffect(() => taskModel.getTasksListFx(), []);
 
   return (
     <Layout className={styles.root}>
@@ -556,30 +556,16 @@ export const $tasks = createStore<Task[]>(...)
 
 
 // We make a hook to get involved in updates react
+// @see In the case of effector, using a hook is an extreme measure, since computed stores are more preferable
 export const useTask = (taskId: number): import("shared/api").Task | undefined => {
-  return useStore($tasks)[taskId];
+  return useStoreMap({
+    store: $tasks,
+    keys: [taskId],
+    fn: (tasks, [id]) => tasks[id] ?? null
+  });
 };
 ```
 
-:::tip
-
-For a more convenient public API of models, you can export selectors/hooks/events, etc. as separate objects.
-
-**But the main thing** is that this does not undermine [the anti-fragility][refs-public-api] of the module
-
-```ts
-export const events = { toggleTask, setQueryConfig };
-export const effects = { getTaskByIdFx, getTasksListFx };
-export const selectors = { useTask };
-```
-
-```ts
-const task = taskModel.selectors.useTask(taskId);
-taskModel.events.toggleTask(taskId)
-```
-
-:::
-
 #### (features) Checkbox for the task
 
 ```tsx title=features/toggle-task/ui.tsx

website/i18n/en/docusaurus-plugin-content-docs/current/guides/examples/auth.mdx

@@ -7,6 +7,9 @@ import WIP from '@site/src/shared/ui/wip/tmpl.mdx'
 
 # Auth
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 Every application has business logic related **with the current authorized user.**
 
 > Usually such an entity is called `Viewer` / `Principle` / `Session` - but within the framework of the article, we will focus on `viewer`, but it all depends on your project and team
@@ -21,9 +24,10 @@ Let's look at them in more detail below with examples
 
     *The methodology does not regulate this level of nesting in any way yet*
 
-2. It should also be understood that the examples given below are abstract and synthetic, and are formed by the author's point of view and experience
+2. It should also be understood that the examples below are abstract and synthetic, and are formed to demonstrate only the concepts of the methodology
+
+    *FeatureSliced does not regulate the best practices of a particular data-fetcher or state-manager*
 
-    *The implementation in your projects may differ, the methodology, again, does not regulate these aspects in any way*
 
 :::
 
@@ -73,12 +77,33 @@ export { ViewerAvatar } from "./avatar";
 ...
 ```
 
+<Tabs>
+<TabItem value="redux" label="Redux" default>
+
+In redux, the [redux-ducks](https://github.com/erikra/ducks-modular-redux) approach is generally accepted when its units (selectors/actions/...) they lie side by side and are clearly decomposed
+
+But explicit decomposition is not required
+
 ```ts title=entities/user/model/index.ts
 export * as selectors from "./selectors";
 export * as events from "./events";
 export * as stores from "./stores";
 ...
 ```
+</TabItem>
+<TabItem value="effector" label="Effector">
+
+The effector model will most often consist of a single file - because it is customary to store all units side by side there
+
+If the units in the model can be schematically divided into several submodels, then [you can explicitly do this](https://github.com/feature-sliced/examples/pull/1#discussion_r654841332) denote in the Public API
+
+```ts title=entities/user/model/index.ts
+export * as submodel1 from "./submodel1"
+export * as submodel2 from "./submodel2"
+...
+```
+</TabItem>
+</Tabs>
 
 ```ts title=entities/user/index.ts
 export * from "./ui"
@@ -117,23 +142,33 @@ export const UserCard = ({ data, ... }: UserCardProps) => {
 
 At this level, the entity of the current user is usually created, with the re-export of hooks/contracts/selectors for use by the overlying layers
 
-```ts title=entities/user/model/stores.ts
-// effector
-export const $user = createStore(...);
-// redux (+ toolkit)
-export const userSlice = createSlice(...)
-```
+<Tabs>
+<TabItem value="redux" label="Redux" default>
 
-```ts title=entities/user/model/selectors.ts
-// effector
-export const useViewer = () => {
-    return useStore($user)
-}
-// redux (+ toolkit)
+```ts
+// entities/viewer/model/selectors.ts
 export const useViewer = () => {
     return useSelector((store) => store.entities.userSlice);
 }
+export const useAuth = () => {
+    const viewer = useViewer();
+    return !!viewer
+}
+// entities/viewer/model/store.ts
+export const userSlice = createSlice(...)
+```
+</TabItem>
+<TabItem value="effector" label="Effector">
+
+```ts
+// entities/viewer/model/index.ts
+export const $viewer = createStore(...);
+export const $isAuth = $viewer.map((viewer) => !!viewer);
+// **/**/ui.tsx
+const viewer = useStore($viewer);
 ```
+</TabItem>
+</Tabs>
 
 Also, other logic can be implemented here
 

website/i18n/ru/docusaurus-plugin-content-docs/current/concepts/low-coupling.md

@@ -103,25 +103,25 @@ const List: Component<ListProps> = ({ Header, Items }) => (
 > Однако, реализация в виде фабрики необязательна - фича может зависеть от нижележащих слоев и напрямую
 
 ```ts title=pages/main/model.ts
-import { userStore } from "entitites/user"
-import { conversationStore } from "entities/conversation"
-import { contactStore } from "entities/contact"
+import { userModel } from "entitites/user"
+import { conversationModel } from "entities/conversation"
+import { contactModel } from "entities/contact"
 
 import { createMessageInput } from "features/message-input"
 import { createConversationSwitch } from "features/conversation-switch"
 
 import { beautifiy } from "shared/lib/beautify-text"
 
 export const { allConversations, setConversation } = createConversationSwitch({
-    contacts: contactStore.allContacts,
-    setConversation: conversationStore.setConversation,
-    currentConversation: conversationStore.conversation,
-    currentUser: userStore.currentUser
+    contacts: contactModel.allContacts,
+    setConversation: conversationModel.setConversation,
+    currentConversation: conversationModel.conversation,
+    currentUser: userModel.currentUser
 })
 
 export const { sendMessage, attachFile } = createMessageInput({
-    author: userStore.currentUser
-    send: conversationStore.sendMessage,
+    author: userModel.currentUser
+    send: conversationModel.sendMessage,
     formatMessage: beautify
 })
 ```

website/i18n/ru/docusaurus-plugin-content-docs/current/concepts/public-api.md

@@ -65,11 +65,11 @@ Public API должен осуществлять **контроль доступ
     + import { AuthForm } from "features/auth-form"
     ```
 
-### 2. Анти-хрупкость
+### 2. Устойчивость к изменениям
 
-Public API должен быть **анти-хрупким** - устойчивым к изменениям внутри модуля
+Public API должен быть **устойчивым к изменениям** внутри модуля
 
-- Ломающие изменения поведения модуля отражаются в изменении Public API
+- Изменения, ломающие поведения модуля, должны отражаться в изменении Public API
 
 #### Примеры
 
@@ -103,34 +103,34 @@ Public API должен способствовать **легкой и гибк
 
     ```ts title=features/auth-form/index.ts
     export { Form } from "./ui"
-    export * as store from "./model"
+    export * as model from "./model"
     ```
 
     ```ts title=features/post-form/index.ts
     export { Form } from "./ui"
-    export * as store from "./model"
+    export * as model from "./model"
     ```
 
     ```diff
-    - import { Form, store } from "features/auth-form"
-    - import { Form, store } from "features/post-form"
+    - import { Form, model } from "features/auth-form"
+    - import { Form, model } from "features/post-form"
     ```
 
 - **Хорошо:** коллизия решена на уровне интерфейса
 
     ```ts title=features/auth-form/index.ts
     export { Form as AuthForm } from "./ui"
-    export * as authFormStore from "./model"
+    export * as authFormModel from "./model"
     ```
 
     ```ts title=features/post-form/index.ts
     export { Form as PostForm } from "./ui"
-    export * as postFormStore from "./model"
+    export * as postFormModel from "./model"
     ```
 
     ```diff
-    + import { AuthForm, authFormStore } from "features/auth-form"
-    + import { PostForm, postFormStore } from "features/post-form"
+    + import { AuthForm, authFormModel } from "features/auth-form"
+    + import { PostForm, postFormModel } from "features/post-form"
     ```
 
 ##### Гибкое использование
@@ -145,8 +145,9 @@ Public API должен способствовать **легкой и гибк
 - **Хорошо:** "пользователь" фичи получает доступ к нужным вещам итеративно и гибко
 
     ```diff
-    + import { authFormStore } from "features/auth-form"
-    + dispatch(authFormStore.actions.updateUserDetails(...))
+    + import { authFormModel } from "features/auth-form"
+    + dispatch(authFormModel.effects.updateUserDetails(...)) // redux
+    + authFormModel.updateUserDetailsFx(...) // effector
     ```
 
 ##### Разрешение коллизий
@@ -173,7 +174,7 @@ Public API должен способствовать **легкой и гибк
 
     ```ts title=features/auth-form/index.ts
     export { Form as AuthForm } from "./ui"
-    export * as authFormStore from "./model"
+    export * as authFormModel from "./model"
     ```
 
      ```ts title=features/post-form/model.ts
@@ -182,7 +183,7 @@ Public API должен способствовать **легкой и гибк
 
     ```ts title=features/post-form/index.ts
     export { Form as PostForm } from "./ui"
-    export * as postFormStore from "./model"
+    export * as postFormModel from "./model"
     ```
 
 ## О реэкспортах