Где должен храниться store (Redux/Mobx) в FSD архитектуре?

В FSD (Full-Stack Development) архитектуре, где React используется в качестве клиентской части приложения, хранение состояния приложения (или "store") имеет ключевое значение. Два наиболее популярных фреймворка для хранения состояния в React приложениях это Redux и Mobx, поэтому рассмотрим, где должен храниться store в каждом из этих фреймворков.

В Redux, состояние приложения хранится единым объектом в единственном объекте "store". Это глобальное хранилище, доступное для всех компонентов приложения. Store - это неизменяемый объект, и изменения состояния происходят через диспетчеризацию действий (actions) в соответствии с редьюсерами (reducers). Часто, стоит создать отдельную папку (например, "store") для организации кода связанного с хранилищем. Внутри папки "store" создается файл, который поддерживает создание и исполнение "store". Это может быть файл с именем "index.js" или "store.js" и в нем следует выполнять следующие задачи:

1. импортировать необходимые функции и библиотеки (например, createStore, combineReducers из redux);
2. импортировать редьюсеры приложения;
3. объединить редьюсеры в один корневой редьюсер;
4. создать хранилище, используя функцию createStore и передавая ей корневой редьюсер;
5. экспортировать это хранилище, чтобы оно было доступно для использования в других частях приложения.

Пример кода для создания store в Redux может выглядеть примерно так:

import { createStore, combineReducers } from 'redux';
import todosReducer from './reducers/todos';
import userReducer from './reducers/user';

const rootReducer = combineReducers({
  todos: todosReducer,
  user: userReducer
});

const store = createStore(rootReducer);

export default store;

В Mobx, состояние приложения также хранится в объекте "store", но в этом случае каждый компонент может иметь свою копию для хранения своего уникального состояния. Объект "store" предоставляет доступ к данным через функции, такие как "observable", "computed" и "action", а также реагирует на изменения в этих данных, автоматически обновляя пользовательский интерфейс. Место хранения состояния в Mobx может отличаться в зависимости от дополнительных библиотек или паттернов, используемых в приложении. Варианты включают хранение состояния в контейнерах компонентов, внедрение (инъекцию) зависимостей или использование модульной структуры. Определенным преимуществом Mobx является то, что он дает разработчику гибкость в выборе, где хранить состояние.

Пример кода создания store в Mobx может выглядеть примерно так:

import { observable, action, computed } from 'mobx';

class TodoStore {
  @observable todos = [];
  
  @action addTodo = (text) => {
    this.todos.push({ text: text, completed: false });
  }
  
  @action toggleTodo = (index) => {
    this.todos[index].completed = !this.todos[index].completed;
  }
  
  @computed get completedTodosCount() {
    return this.todos.filter(todo => todo.completed).length;
  }
}

const store = new TodoStore();

export default store;

Как видно из примеров, место хранения store (Redux/Mobx) в FSD архитектуре может зависеть от выбранных технологий и паттернов для управления состоянием в React приложениях. Важно выбрать такое место, которое будет наиболее удобным и понятным в контексте вашего проекта.