redux 2.0.4 redux: ^2.0.4 copied to clipboard
Redux for Dart
redux.dart #
Redux for Dart using generics for typed State. It includes a rich ecosystem of Docs, Middleware, Dev Tools and platform integrations.
Usage #
import 'package:redux/redux.dart';
// Create typed actions. You will dispatch these in order to
// update the state of your application.
enum Actions {
increment,
decrement
}
// Create a Reducer. A reducer is a pure function that takes the
// current State (int) and the Action that was dispatched. It will
// combine the two into a new state! After the state is updated,
// the store will emit the update to the `onChange` stream.
//
// Because reducers are pure functions, they should not perform any
// side-effects, such as making an HTTP request or logging messages
// to a console. For that, use Middleware.
int counterReducer(int state, action) {
if (action is Actions.increment) {
return state + 1;
} else if (action is Actions.decrement) {
return state - 1;
}
return state;
}
// A piece of middleware that will log all actions with a timestamp
// to your console!
//
// Note, this is just an example of how to write your own Middleware.
// See the redux_logging package on pub for a pre-built logging
// middleware.
loggingMiddleware(Store<int> store, action, NextDispatcher next) {
print('${new DateTime.now()}: $action');
next(action);
}
main() {
// Create the store with our Reducer and Middleware
final store = new Store<int>(
counterReducer,
initialState: 0,
middleware: [loggingMiddleware],
);
// Render our State right away
render(store.state);
// Listen to store changes, and re-render when the state is updated
store.onChange.listen(render);
// Attach a click handler to a button. When clicked, the `INCREMENT` action
// will be dispatched. It will then run through the reducer, updating the
// state.
//
// After the state changes, the html will be re-rendered by our `onChange`
// listener above.
querySelector('#increment').onClick.listen((_) {
store.dispatch(Actions.increment);
});
}
render(int state) {
querySelector('#value').innerHtml = '${state}';
}
Docs #
- Motivation and Principles - Learn why Redux might make sense for your app and the principles behind it.
- Basics - Introduction to the core concepts in Redux
- Async - Learn how to make async calls, such as to a web service or local database, with Redux.
- Combining Reducers -
combineReducers
works a bit differently in Dart than it does in JS. Learn why, and how to combine reducers in a type-safe way! - API Documentation - Rich documentation included in the source code and generated by DartDoc.
Flutter Examples #
- flutter_architecture_samples - A Todo List App with local storage. Includes a README describing how to combine Redux with Flutter effectively.
- Counter example in the flutter_redux library - A very simple counter example
- flutter_redux_todo_list - A basic flutter_redux todo list example by xqwzts.
- Weight Tracking App - Demonstrates how to combine Redux with Firebase to build a Flutter app by MarcinusX.
- Reduxing Flutter Firebase App - Article describing how the author combined Redux with Firebase.
- Deleting entry and undoing deletion in snackbar - Article showing how to create "Undo" actions with Redux & Firebase.
Web Examples #
See the example/
directory for a few simple examples of the basics of Redux.
To launch the examples in your browser:
- Run
pub serve example
from this directory - Open http://localhost:8080
Middleware #
- redux_logging - Connects a Logger to a Store, and can print out actions as they're dispatched to your console.
- redux_thunk - Allows you to dispatch functions that perform async work as actions.
- redux_future - For handling Dart Futures that are dispatched as Actions.
- redux_epics - Middleware that allows you to work with Dart Streams of Actions to perform async work.
Platform Integrations #
- flutter_redux - A library that connects Widgets to a Redux Store
Dev Tools #
The redux_dev_tools library allows you to create a DevToolsStore
during dev mode in place of a normal Redux Store
. This DevToolsStore
will act exactly like a normal Store
at first, with one catch: It will allow you to travel back and forth throughout the State of your application!
You can combine the DevToolsStore
with your own UI to travel in time, or use one of the existing options for the platform you're working with:
- Flutter - flutter_redux_dev_tools
- Web - No web UI exists yet. This could be you!
Additional Utilities #
- reselect - Efficiently derive data from your Redux Store with memoized functions.