redux_undo 0.1.1+5

  • Readme
  • Changelog
  • Example
  • Installing
  • 53

Flutter Community: redux_und

Build Status codecov

redux_undo.dart #

This package will make your redux store undoable.

READ THIS FIRST #

⚠️

The package as it is now is still in Beta phase. So you are free to use it as is, but please keep in mind that, until version 1.0.0 is released all class, function and helper-names are prone to change.

Things to come in the future #

  • [ ] Support for string based actions (currently supported are only class-based actions)
  • [ ] Support for making only a slice of the state undoable
  • [ ] more examples and documentation

Installation #

define the dependency in your pubspec.yaml file:

dependencies:
  redux_undo: ^0.1.1+5

update your applications packages by running

pub get

or when using flutter as a framework

flutter pub get

import the package to use in the file you are setting up redux:

import 'package:redux_undo/redux_undo.dart';

Structure #

redux_undo will slightly modify your state by adding a new properties-layer at the root of the store. The final structure will look like this:

/// when accessed directly from the store, store.state will have this structure
UndoableHistory<S> state = {
  past: <S>[],
  present: null, // <-- the current state of the app
  future: <S>[],
  latestUnfiltered: null // <-- basically equals present, to store a mutual state before storing it into past or future 
};

Usage #

Because it modifies the initial state you need to initiate redux_undo when initiating the redux store. This is done by calling 2 separate functions:

/// to wrap the root reducer
Reducer<UndoableState<S>> createUndoableReducer<S>(Reducer<S> reducer, { UndoableConfig config });

/// to wrap the Root state of your app.
UndoableState<S> createUndoableState<S>(S initialState, bool ignoreInitialState);

Here is an example of how this can be done in a flutter app:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  final Store<UndoableState<RootState>> store = Store<UndoableState<RootState>>(
    createUndoableReducer<RootState>(rootReducer),
    initialState: createUndoableState(RootState.initial(), false),
  );

  @override
  Widget build(BuildContext context) {
    return StoreProvider<UndoableState<RootState>>(
      store: store,
      child: MaterialApp(
        title: 'Redux Undo Demo',
        home: const MyHomePage(),
      ),
    );
  }
}

Actions #

redux_undo provides 4 basic actions

  • UndoableUndoAction - Standard-Action for undo

    Usage: store.dispatch(UndoableUndoAction())

  • UndoableRedoAction - Standard-Action for redo

    Usage: store.dispatch(UndoableRedoAction())

  • UndoableJumpAction - Standard-Action for jump (to past or to future)

    Usage: store.dispatch(UndoableJumpAction(index: -2)) // <- jumps 2 steps to the past (same as dispatching UndoableUndoAction twice)

    Usage: store.dispatch(UndoableJumpAction(index: 0)) // <- does nothing, since it just returns the current UndoableState

    Usage: store.dispatch(UndoableJumpAction(index: 2)) // <- jumps 2 steps to the future (same as dispatching UndoableRedoAction twice)

  • UndoableClearHistoryAction - Standard-Action for clearing the history

Options #

It is possible to provide a configuration object to the UndoableState instantiation like this:

final UndoableConfig config = UndoableConfig(
  limit: 100,
  blackList: <Type>[
    BlacklistedAction,
  ],
  whiteList: <Type>[
    WhitelistedAction,
  ],
);

Then pass it to the createUndoableReducer function like this:

final Store<UndoableState<RootState>> store = Store<UndoableState<RootState>>(
    createUndoableReducer<RootState>(rootReducer, config: config),
    initialState: createUndoableState(RootState.initial(), false),
);

These are the options the UndoableConfig class provides:

  • int limit: limits the length of the UndoableState.past List and with this ultimately the length of UndoableState.future as well
    • default value => 10
  • List

Contributors #

Changelog #

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[Unreleased] #

  • support for string-based actions
  • possibility to only make a part of the state undoable
  • more examples and documentation

[0.1.1+5] - 2020-02-27 #

Changed #

  • Moved package to Flutter Community

[0.1.1+4] - 2020-02-26 #

Added #

  • added abstract class UndoableAction which every pre-built action from redux_undo extends
  • added the getSize getter to UndoableState
  • added tests for complete code coverage

Changed #

  • updated README

Removed #

  • removed UndoableInitAction since the use-case does not exist anymore
  • removed the size member from UndoableState

[0.1.1+3] - 2020-01-29 #

Added #

  • added generic types to the UndoableState class and helper functions

Fixed #

  • fixed a navigation-bug in the example

Changed #

  • updated dependency version

[0.1.1+2] - 2020-01-29 #

Changed #

  • updated dependency version

[0.1.1+1] - 2019-12-02 #

Added #

  • added new boolean getters to the UndoableState class: canUndo and canRedo
  • added the support for multiple screens in the example to showcase different use-cases in the future

Changed #

  • reformatted some files with dartfrmt

[0.1.0+3] - 2019-12-02 #

Added #

  • added a new helper function UndoableState createUndoableState(dynamic state) to initiate the UndoableState on init

Changed #

  • renamed undoableReducer to Reducer<UndoableState> createUndoableReducer(dynamic reducer, { UndoConfig config }) to keep naming consistent
  • reformatted some files with dartfrmt

[0.1.0+2] - 2019-12-02 #

Added #

  • added a bit of documentation

Changed #

  • reformatted some files with dartfrmt

[0.1.0+1] - 2019-12-02 #

Added #

  • Initial release version

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';
import 'package:redux_undo/redux_undo.dart';
import 'package:redux_undo_example/components/home.dart';
import 'package:redux_undo_example/components/simple_counter.dart';

import 'redux/root_reducer.dart';
import 'redux/root_state.dart';
import 'redux/simple_counter/simple_counter_actions.dart';

void main() => runApp(MyApp());

final UndoableConfig config = UndoableConfig(
  whiteList: <Type>[
    CustomUndo,
  ],
);

/// redux_undo demo
class MyApp extends StatelessWidget {
  final Store<UndoableState<RootState>> store = Store<UndoableState<RootState>>(
    createUndoableReducer<RootState>(rootReducer, config: config),
    initialState: createUndoableState(RootState.initial(), false),
  );

  final GlobalKey navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return StoreProvider<UndoableState<RootState>>(
      store: store,
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Redux Undo Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        navigatorKey: navigatorKey,
        routes: <String, Widget Function(BuildContext)>{
          '/': (BuildContext context) {
            return const HomeScreenView(title: 'Welcome');
          },
          'simple_counter': (BuildContext context) {
            return const SimpleCounterView(title: 'Simple Counter');
          },
        },
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  redux_undo: ^0.1.1+5

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:redux_undo/redux_undo.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
6
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
53
Learn more about scoring.

We analyzed this package on Mar 26, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6

Health suggestions

Format lib/src/reducer.dart.

Run dartfmt to format lib/src/reducer.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
meta ^1.1.8 1.1.8
redux ^4.0.0 4.0.0
Dev dependencies
coverage ^0.13.6
pedantic ^1.9.0
test ^1.12.0