Redux.dart 开源项目教程

Redux.dart 开源项目教程

redux.dartRedux for Dart项目地址:https://gitcode.com/gh_mirrors/re/redux.dart

项目介绍

Redux.dart 是一个使用泛型实现类型化状态的 Dart 库，专为 Redux 设计。它包含了一个丰富的生态系统，包括文档、中间件、开发工具，并且可以与 Flutter 结合使用，通过 flutter_redux 包实现。Redux 的核心理念是单一数据源、状态只读以及通过纯函数改变状态，这些原则使得状态管理更加可预测和易于调试。

项目快速启动

安装依赖

首先，在你的 Flutter 项目中添加 Redux.dart 和 flutter_redux 依赖：

dependencies:
  flutter:
    sdk: flutter
  redux: ^5.0.0
  flutter_redux: ^0.8.0

创建 Store

创建一个简单的 Redux store，包含一个计数器状态和相应的动作及 reducer：

import 'package:redux/redux.dart';

// 定义动作
enum CounterAction { increment, decrement }

// 定义状态
class CounterState {
  final int count;
  CounterState(this.count);
}

// 定义 reducer
CounterState counterReducer(CounterState state, dynamic action) {
  if (action == CounterAction.increment) {
    return CounterState(state.count + 1);
  } else if (action == CounterAction.decrement) {
    return CounterState(state.count - 1);
  }
  return state;
}

// 创建 store
final store = Store<CounterState>(
  counterReducer,
  initialState: CounterState(0),
);

集成到 Flutter

使用 StoreProvider 将 store 提供给 Flutter 应用，并使用 StoreConnector 来连接 UI 和 store：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreProvider<CounterState>(
      store: store,
      child: MaterialApp(
        home: CounterPage(),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Redux Counter')),
      body: Center(
        child: StoreConnector<CounterState, int>(
          converter: (store) => store.state.count,
          builder: (context, count) {
            return Text('$count', style: TextStyle(fontSize: 48));
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () => store.dispatch(CounterAction.increment),
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () => store.dispatch(CounterAction.decrement),
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

应用案例和最佳实践

计数器示例

上述快速启动部分展示了一个简单的计数器应用，这是 Redux 在 Flutter 中的基础应用。

待办事项列表

一个更复杂的示例是使用 Redux 管理一个待办事项列表。这个示例展示了如何处理复杂的状态和异步操作，例如从服务器获取数据。

电影和放映时间浏览器

inKino 应用是一个跨平台的电影和放映时间浏览器，使用 Redux 管理应用状态，并包含大量的测试。

典型生态项目

flutter_redux

flutter_redux 是一个将 Redux 集成到 Flutter 应用中的工具包，提供了 StoreProvider, StoreBuilder, 和 StoreConnector 等组件，帮助开发者更方便地使用 Redux。

redux_dev_tools

redux_dev_tools 允许开发者实时查看和调试 Redux 状态，支持时间旅行调试，这对于开发和调试复杂的应用

redux.dartRedux for Dart项目地址:https://gitcode.com/gh_mirrors/re/redux.dart