Redux Model

Уведомление об отсутствии поддержки

redux-model больше не поддерживается, пожалуйста, перейдите на foca

После многих лет накопления и практики работы со состоянием, а также личного развития в области технологий, было замечено, что использование классов для разработки состояния недостаточно эффективно. Поэтому был создан новый набор библиотек для управления состоянием foca, который более продвинутый и эффективный, можно сказать, это ремастер версия redux-model. Хотя обе они основаны на Redux, но радость заключается в том, что foca и redux-model могут использоваться одновременно в одном проекте, при этом данные не будут мешать друг другу, снова приветствуем использование foca.

Английская документация

Redux-Model был спроектирован для решения проблем сложной разработки с помощью исходного Redux, повторяющихся трудозатрат, увеличивающегося объема кода из-за шаблонных файлов, а также затрудненного отслеживания кода из-за распределённых файлов action и reducer.

# Основные характеристики

• Глубокое упаковывание, модульная разработка
• Использование MVVM для быстрой обработки reducer
• 👍 Настоящий TypeScript-фреймворк, который легче и приятнее писать, чем JS
• Встроенные HTTP-сервисы, действия запроса автоматически следят за загрузкой и ограничивают частоту запросов данных
• Поддерживает React/Vue Hooks
• Поддерживает долговременное хранение данных
• Поддерживает GraphQL-запросы
• Поддерживает разделение кода

Установка

React или React-Native

npm install @redux-model/react

Taro

# Для Taro 3+
npm install @redux-model/taro

# Для Taro 2+
npm install @redux-model/taro@6.10.0 @tarojs/redux

# Для Taro 1+
npm install @redux-model/taro@6.9.5 @tarojs/redux

Vue

# Для Vue 3+
npm install @redux-model/vue

# Для Vue 2+
npm install @redux-model/vue@6.9.2

Определение модели

interface Response {
  id: number;
  name: string;
}

interface Data {
  counter: number;
  users: Partial<{
    [key: string]: Response;
  }>;
}

class TestModel extends Model<Data> {
  plus = this.action((state, step: number = 1) => {
    state.counter += step;
  });
}

Получение Action

testModel.plus();
testModel.plus(2);

testModel.getUser(3);
testModel.getUser(5).then(({ response }) => {});

Получение данных в хуках

const data = testModel.useData(); // { counter: number, users: object }

const counter = testModel.useData((data) => data.counter); // number
const users = testModel.useData((data) => data.users); // object

const loading = testModel.getUser.useLoading(); // boolean

Получение данных в connect

type ReactProps = ReturnType<typeof mapStateToProps>;

const mapStateToProps = () => {
  return {
    counter: testModel.data.counter, // number
    users: testModel.data.users, // object
    loading: testModel.getUser.loading, // boolean
  };
};
``````javascript
export default connect(mapStateToProps)(App);

Примеры запуска онлайн

• Контер
• Устойчивость данных
• TODO панель
• Запрос
• Ограниченный запрос
• Наблюдение за задачами
• Сочетание задач
• Подзадачи

Документация

Для просмотра документации нажмите здесь.

Локальное развитие

• git clone вашего форкнутого репозитория
• yarn install && yarn bootstrap

Выполнение тестовых сценариев выполните командой yarn test. Изменение локальной документации выполните командой yarn docs.

Приветствуем ваше использование и всегда рады принимать ваши предложения.