FlutterWeb浏览器刷新后无法回退的解决方案_flutter redux 浏览器刷新画面

import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';
 
// 假设这是你的RootState类，用于管理状态
class RootState {
  final String currentUrl;
 
  RootState({this.currentUrl});
 
  RootState copyWith({String currentUrl}) {
    return RootState(currentUrl: currentUrl ?? this.currentUrl);
  }
}
 
// 假设这是你的RootAction类，用于定义可以被执行的动作
class RootAction {
  final String newUrl;
 
  RootAction(this.newUrl);
}
 
// 假设这是你的Reducer函数，用于根据动作更新状态
RootState rootReducer(RootState state, dynamic action) {
  if (action is RootAction) {
    return state.copyWith(currentUrl: action.newUrl);
  }
  return state;
}
 
void main() {
  // 创建Store，并初始化状态
  final store = Store<RootState>(rootReducer, initialState: RootState(currentUrl: '/'));
 
  // 应用的入口Widget
  runApp(MaterialApp(
    home: StoreProvider(
      store: store,
      child: MyApp(),
    ),
  ));
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: StoreConnector<RootState, String>(
          converter: (Store<RootState> store) => store.state.currentUrl,
          builder: (BuildContext context, String currentUrl) {
            return Text('当前URL: $currentUrl');
          },
        ),
      ),
      floatingActionButton: StoreConnector<RootState, VoidCallback>(
        converter: (Store<RootState> store) {
          return () => store.dispatch(RootAction('/new-url'));
        },
        builder: (BuildContext context, VoidCallback updateUrl) {
          return FloatingActionButton(
            onPressed: updateUrl,
            child: Icon(Icons.refresh),
          );
        },
      ),
    );
  }
}

这个代码示例展示了如何使用Flutter Redux库来管理状态，并且在浏览器刷新后保持应用的状态不变。这里的关键点是创建了一个Store来集中管理应用的状态，并且使用StoreConnector来连接状态和UI。当用户点击FloatingActionButton时，会通过dispatch一个动作来更新状态，而状态的变化会通过StoreConnector更新UI。这样即使在浏览器刷新后，也能够回退到用户之前的状态。