Flutter UI状态管理工具:Redux

在 Flutter Redux 中,StoreBuilder 是一个用于构建基于 Redux store 状态的 UI 组件的工具。

function有如下两种定义方式:

StoreBuilder<AppState>:监听整个应用程序的状态

StoreBuilder<AppState, HomePageState> :监听特定页面的状态(HomePageState

区别如下:

StoreBuilder<AppState>(
  builder: (context, store) {
    // 这里可以访问整个 AppState
    var someGlobalValue = store.state.someGlobalValue;
    return Text(someGlobalValue);
  },
)

当使用 StoreBuilder<AppState> 时,会构建一个能够访问并响应整个应用状态 (AppState) 变化的 widget。这意味着无论 AppState 的哪部分发生变化,这个 StoreBuilder 都可能被重建。

StoreBuilder<AppState, HomePageState>(
  builder: (context, store) {
    // 这里可以访问 HomePageState
    var homePageValue = store.state.homePageState.someHomePageValue;
    return Text(homePageValue);
  },
)

当使用 StoreBuilder<AppState, HomePageState> 时,会构建一个专门响应 HomePageState 变化的 widget。这意味着只有当 HomePageState 部分发生变化时,这个 StoreBuilder 才会被重建。这对于性能优化很有帮助,因为它避免了不必要的重建。

But,通常不会有如:StoreBuilder<HomePageState>的用法

因为 Redux 在设计时,是围绕着一个单一的全局状态对象——通常称为 AppStateStore<AppState> ——来构建的。这个全局状态对象包含了整个应用的所有状态信息。

但也可以这样用,如以下情景:

如果应用采用了多个 Redux Store 而不是单一全局 Store 的架构,那么在这种情况下,将会有StoreBuilder<SomeSpecificState> 的用法。每个 Store 管理应用的不同部分

(但是这种用法违背了一个重要原则:单一数据源)。

同时据笔者了解,这个Redux框架广泛应用于React,同时Flutter也有着其他状态管理工具可供选择。

Redux 的重要核心概念:Action。

Action 是改变应用状态(存储在 Redux store 中)的唯一方式。每个 action 都有一个 type 属性,它是一个字符串常量,Action 描述了在应用中发生了什么。例如,用户操作、API 请求等都可以触发 action。

// 定义一个 Action
class AddTodoAction {
  final String todo;

  AddTodoAction(this.todo);
}

为了简化 action 的创建,可以定义一个 action creator,它是一个返回 action 的函数。

// Action Creator
AddTodoAction addTodoAction(String todo) {
  return AddTodoAction(todo);
}

Action 本身不直接改变应用的状态;它仅仅是一个描述“发生了什么”的消息。状态的实际改变是在 reducers 中处理的。

// 假设你有一个状态列表用于存储待办事项
List<String> todosReducer(List<String> todos, dynamic action) {
  if (action is AddTodoAction) {
    return List.from(todos)..add(action.todo);
  }
  return todos;
}

当 action 被发送(通常称为“分发”)时,Redux store 的 reducer 会接收到这个 action,并根据 action 的类型和数据来更新状态。

// 创建 Action
var action = AddTodoAction('Learn Redux with Dart');

// 分发 Action
store.dispatch(action);

如上。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏目艾拉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值