【Flutter】reduxパッケージについて

reduxとは
使い方

reduxとは

reduxは、DartとFlutterアプリケーションのための予測可能な状態コンテナです。
ジェネリクスを使用して型付けされた状態を管理し、豊富なエコシステムを提供します。

Redux is a predictable state container for Dart and Flutter apps

使い方

パッケージのインストール

dependencies:
  redux: ^5.0.0
  flutter_redux: ^0.8.2

基本的な使用方法

アクションの作成

アクションは、アプリケーションの状態を更新するためにディスパッチするイベントです。以下のように、アクションを列挙型として定義します。

enum Actions {
  increment,
  decrement,
}

リデューサーの作成

リデューサーは、現在の状態とディスパッチされたアクションを組み合わせて新しい状態を生成する純粋関数です。以下にカウンター用のリデューサーの例を示します。

int counterReducer(int state, dynamic action) {
  if (action == Actions.increment) {
    return state + 1;
  } else if (action == Actions.decrement) {
    return state - 1;
  }
  return state;
}

ストアの作成

ストアは、アプリケーションの状態を保持し、リデューサーを使用して状態を更新します。以下に、ミドルウェアを含むストアの作成例を示します。

import 'package:redux/redux.dart';

void loggingMiddleware(Store<int> store, dynamic action, NextDispatcher next) {
  print('${DateTime.now()}: $action');
  next(action);
}

void main() {
  final store = Store<int>(
    counterReducer,
    initialState: 0,
    middleware: [loggingMiddleware],
  );

  // 状態の初期レンダリング
  print(store.state);

  // 状態変更を監視し、変更があった場合にレンダリングを更新
  store.onChange.listen((state) => print(state));

  // アクションのディスパッチ
  store.dispatch(Actions.increment);
  store.dispatch(Actions.decrement);
}

Flutterアプリでの使用

flutter_reduxパッケージを使用して、FlutterウィジェットとReduxストアを接続します。

Flutterアプリのセットアップ

main.dartファイルを以下のように設定します。

import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';

enum Actions { Increment }

int counterReducer(int state, dynamic action) {
  if (action == Actions.Increment) {
    return state + 1;
  }
  return state;
}

void main() {
  final store = Store<int>(counterReducer, initialState: 0);

  runApp(MyApp(store: store));
}

class MyApp extends StatelessWidget {
  final Store<int> store;

  MyApp({required this.store});

  @override
  Widget build(BuildContext context) {
    return StoreProvider<int>(
      store: store,
      child: MaterialApp(
        home: Counter(),
      ),
    );
  }
}

class Counter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Redux Counter'),
      ),
      body: StoreConnector<int, String>(
        converter: (store) => store.state.toString(),
        builder: (context, count) {
          return Center(
            child: Text(
              count,
              style: TextStyle(fontSize: 24.0),
            ),
          );
        },
      ),
      floatingActionButton: StoreConnector<int, VoidCallback>(
        converter: (store) {
          return () => store.dispatch(Actions.Increment);
        },
        builder: (context, callback) {
          return FloatingActionButton(
            onPressed: callback,
            child: Icon(Icons.add),
          );
        },
      ),
    );
  }
}

ミドルウェアの使用

ミドルウェアは、アクションがリデューサーに到達する前に処理を行うためのものです。例として、ロギングミドルウェアを作成し、ストアに適用します。

void loggingMiddleware(Store<int> store, dynamic action, NextDispatcher next) {
  print('${DateTime.now()}: $action');
  next(action);
}

final store = Store<int>(
  counterReducer,
  initialState: 0,
  middleware: [loggingMiddleware],
);