Manage the state of your app using Redux || Flutterđź’™

What is the state?

In Redux, we have 3 main components: Action, Reducer, Store!

Let’s convert our basic counter application and manage its state using Redux!

Step 1: Create a file to store the functionalities. Let’s call it redux_service.dart

Step 2: Wrap your MaterialApp with StoreProvider and provide the redux store to the entire widget tree!

Step 3: Create a file home.dart for the UI. Create a store variable to access the actions and store!

final store = Store<int>(ReduxActions.counterUpdate, initialState: 0);
Center(
child: StoreConnector<int, String>(
converter: (store) => store.state.toString(),
builder: (context, count) {
return Text(
'The button has been pushed this many times: $count',
style: Theme.of(context).textTheme.headline4,
);
},
),
),

Step 4: Now, we need to do the same on our FloatingActionButton too as we will need the access of store to dispatch the action!

StoreConnector<int, VoidCallback>(
converter: (store) {
return () => store.dispatch(CounterActions.Increment);
},
builder: (context, callback) {
return IconButton(
onPressed: callback,
icon: Icon(Icons.add),
);
},
),

Here’s the entire file for home.dart:

Output:

Don’t forget to connect with me on:

Don’t stop, until you are breathing!💙
- Abhishek Doshi

--

--

--

Google Developer Expert — Dart, Flutter & Firebase 💙💛

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Writing a CRUD app with Node.js and MongoDB

How to Get the First N Characters of a String in JavaScript

How To use routes in Flutter using Generated Routes

What is inside of Angular JSON file

User Feedback and Improvement of My React App

How to Build a Mobile Minimum Viable Product (MVP) in 2021

System Design: Design and monitor Cache component

Installing and configuring PatternLab

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Doshi

Abhishek Doshi

Google Developer Expert — Dart, Flutter & Firebase 💙💛

More from Medium

Flutter : A Beginners guide to Flutter

Introduction to Flutter : Part 1

How to take a photo and save it to gallery in Flutter mobile app

The Complete 2022 Flutter Development Bootcamp with Dart

The Complete 2022 Flutter Development Bootcamp with Dart