1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/geekact-redux-model

Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README-EN.md

Redux Model

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

Redux Model создан для улучшения оригинального фреймворка Redux, который имеет сложный поток и множество шаблонных конструкций.

Лицензия Статус GitHub Workflow (ветка) Codecov

Возможности

  • Модульное программирование
  • Модификация редьюсеров с использованием MVVM
  • 👍Абсолютно 100% статическая проверка типов с использованием TypeScript
  • Предоставление HTTP-сервиса с отображением загрузки и задержкой
  • Поддержка React/Vue хуков
  • Поддержка сохранения состояния
  • Поддержка 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;
  });

  getUser = $api.action((id: number) => {
    return this
      .get<Response>(`/api/users/${id}`)
      .onSuccess((state, action) => {
        state.users[id] = action.response;
      });
  });
``````typescript
  protected initialState(): Data {
    return {
      counter: 0,
      users: {},
    };
  }
}

export const testModel = new TestModel();

Выполнение действий

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

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

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

const data = testModel.useData(); // { counter: number, users: object }
``````const счетчик = testModel.useData((data) => data.counter); // число
const пользователи = testModel.useData((data) => data.users); // объект

const загрузка = testModel.getUser.useLoading(); // логическое значение

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

type ReactProps = ReturnType<typeof mapStateToProps>;

const mapStateToProps = () => {
  return {
    counter: testModel.data.counter, // число
    users: testModel.data.users, // объект
    loading: testModel.getUser.loading, // логическое значение
  };
};

export default connect(mapStateToProps)(App);

Онлайн-демо

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

Здесь находится документация

Разработка

  • git clone YOUR_FORK_REPO
  • yarn install && yarn bootstrap

Для проверки тестов выполните yarn test
Для редактирования документации выполните yarn docs


Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Гладкая модель Redux, незаменимый инструмент для проектов на TS, поддерживает React, RN, Vue и Taro. Развернуть Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/geekact-redux-model.git
git@api.gitlife.ru:oschina-mirror/geekact-redux-model.git
oschina-mirror
geekact-redux-model
geekact-redux-model
master