패키지, 저장소 및 앱 카테고리 검색

패키지 상세v2.3.0

vxstate

VxState는 Flutter용 또 다른 상태 관리 솔루션입니다. Redux와 VueX에서 크게 영감을 받았습니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
5.8천
좋아요
31
Pub 점수
160

패키지 설치

flutter pub add vxstate

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

VxState는 Redux와 VueX에 영감을 받은 플러터용 상태 관리 솔루션입니다. 예측 가능하고 중앙 집중식 스토어를 제공하여 단방향 데이터 흐름으로 애플리케이션 상태를 관리합니다. 확장성과 간결함을 고려해 설계되었으며, 반응형 업데이트를 지원하고 플러터의 위젯 트리와 잘 통합됩니다. VxState는 간결한 API와 일관된 패턴을 통해 깔끔한 아키텍처와 개발자 경험을 강조합니다. Android, iOS, 웹, macOS, Windows, Linux 등 모든 주요 플랫폼에서 작동합니다.

사용 사례

  • 전역 앱 상태 관리
  • 예측 가능한 상태 변경 구현
  • 대규모 Flutter 애플리케이션 확장
  • 반응형 UI와의 통합
  • 복잡한 상태 로직 간소화
  • 크로스 플랫폼 앱 지원

주요 기능

  • Redux와 유사한 일방적인 데이터 흐름
  • VueX를 영감으로 한 스토어 구조
  • 반응형 상태 업데이트
  • 크로스 플랫폼 호환성
  • 깔끔하고 최소한의 API
  • 내장 개발 도구 지원

적합한 대상

  • Redux 또는 VueX에 익숙한 개발자
  • 대규모 플러터 앱을 구축하는 팀
  • 예측 가능한 상태 관리가 필요한 프로젝트
  • 강력한 디버깅 기능이 필요한 앱
  • 일관성과 구조를 중시하는 개발자

고려 사항

  • 초보자에게는 학습 곡선이 더 가파를 수 있습니다
  • 상태 패턴에 대한 이해가 필요합니다
  • 매우 간단한 앱에는 과도함
  • 인기 있는 대안과 비교해 커뮤니티 자원이 제한적
  • Provider 또는 Riverpod만큼 널리 채택되지 않음

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

VxState

VxState is a state management library built for Flutter apps with focus on simplicity. It is inspired by StoreKeeper & libraries like Redux, Vuex etc with the power of streams. Here is a basic idea of how it works:

  • Single Store (Single source of truth) to keep app's data
  • Structured modifications to store with Mutations
  • Widgets listen to mutations to rebuild themselves
  • Enhance this process with Interceptors and Effects

Core of VxState is based on the InheritedModel widget from Flutter.

Getting started

Add to your pubpsec:

dependencies:
  ...
  vxstate: any

Create a store:

import 'package:vxstate/vxstate.dart';

class MyStore extends VxStore {
  int count = 0;
}

Define mutations:

class Increment extends VxMutation<MyStore> {
  perform() => store.count++;
}

Listen to mutations:

@override
Widget build(BuildContext context) {
  // Define when this widget should re render
  VxState.watch(context, on: [Increment]);

  // Get access to the store
  MyStore store = VxState.store as MyStore;

  return Text("${store.count}");
}

Complete example:

import 'package:flutter/material.dart';
import 'package:vxstate/vxstate.dart';

// Build store and make it part of app
void main() {
  runApp(VxState(
    store: MyStore(),
    child: MyApp(),
  ));
}

// Store definition
class MyStore extends VxStore {
  int count = 0;
}

// Mutations
class Increment extends VxMutation<MyStore> {
  perform() => store.count++;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Define when this widget should re render
    VxState.watch(context, on: [Increment]);

    // Get access to the store
    MyStore store = VxState.store as MyStore;

    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            Text("Count: ${store.count}"),
            RaisedButton(
              child: Text("Increment"),
              onPressed: () {
                // Invoke mutation
                Increment();
              },
            ),
          ],
        ),
      ),
    );
  }
}

Documentation

  • VxStore - Where your apps's data is kept
  • VxMutation - Logic that modifies Store
  • VxBuilder, VxNotifier, VxConsumer - Useful widgets for special cases
  • VxEffect - Chained mutations
  • VxInterceptors - Intercept execution of mutations

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트