Flutterexperts

In Flutter there are many state management techniques and one of them is Redux. Generally Redux is a unidirectional data flow architecture that helps a developer to develop and maintain an App easily

Redux is designed elegantly so the user can easily interact with the App which has frequent state changes, here are the four components generally Redux contains.

1. Action: When an event is generated then it is represented as an action and is dispatched to the Reducer.
2. Reducer: When Reducer gets any update, it updates the store with a new state what it receives.
3. Store: When Store receives any update it notifies to the view.
4. View: It is recreated to show the changes which have been made.

In the above-mentioned process, the main thing which plays a vital role we fetch any third-party data is Redux Middleware, so here a question arrives what is middleware and what it does ??

Redux Middleware

When Application performs any operation like fetching any data from third-party API then middleware comes into action it manages data when it is dispatched from the action and before it reaches the reducer.

If we talk about the functioning of Redux, it works generally in two different ways which are used in any Basic App.

1. When all the states are held in a single Store: developers can access the Stored States which is having all the data changes we need, and if we need to update state all the app will get to know.
2. When data flows Unidirectionally: Data Flow is unidirectional and hence the data flow and handling of data become easier and the process containing all four steps which have already been mentioned earlier.

Now it is high time to understand it by an example, so here we are going to demonstrate it by a shopping cart app where we would select items into cart and remove them according to our choices.

How to use Redux in Flutter?

Before using Redux, you should know that flutter SDK does not have support for Redux but by using the flutter_redux plugin, it can be implemented.

Implementation

Step 1: Add the dependencies

Add dependencies to pubspec.yaml file.

Dependencies:

flutter_redux:
redux:

Here redux provides the architecture for the App and flutter_redux provides the store provider to manage the App.

Step 2: Import

import 'package:redux/redux.dart';
import 'package:flutter_redux/flutter_redux.dart';

And after this, we go to the implementation part of redux so first,

Wrap Material app with store provider, it is a base widget that will pass the given Redux store to all descendants that request it.

https://gist.github.com/shivanchalpandey/5705bc626dbfcd13feb7be17505d6c2f#file-main-dart

Then we create a list of items that we would add or remove

https://gist.github.com/shivanchalpandey/7326e126f2ac7e040bff3b181903e804#file-cartlist-dart

Here we have created a list in which the ListTile is having a text and an icon by which we would handle its functioning of adding or removing it to a cart list.

Now we will define a list of items in AppState class which is having both the cart Item list and main Item list.

https://gist.github.com/shivanchalpandey/c7a03f565848d380b8d6f288a4ef6b48#file-appstate-dart

It will manage states of actions and will dispatch it to reducer so here reducer plays the main role while it is being dispatched to the store.

https://gist.github.com/shivanchalpandey/3d9d95e408a4b4bdcd077285571adced#file-reducer-dart

Here in reducer class actions are being performed like adding or removing items from the cart list and main list.

Now we have to link our states which are being created to the state connector and hence it will manage all the changes we have made,

By this approach, we will connect our whole app with the states that are dispatched to the app and we can access this anywhere in the app.

So it is the full description of the Redux.

---

Thanks for reading this article

If You find something wrong? Let me know in the comments. I would love to improve.

Connect with me on GitHub repositories.

---

FlutterDevs has been working on Flutter for quite some time now. You can connect with us on Facebook and Twitter for any flutter related queries.