Comments (40)
Does this help: https://github.com/DeepStyles/Mobx_Flutter-using-Firestore. I think the community has already created a few examples. Will try to find the links.
from mobx.dart.
Hi everyone, Just done with simple Firestore(also GoogleLogin) with Mobx!!!!!!!!
https://github.com/DeepStyles/Mobx_Firestore-flutter-
from mobx.dart.
No worries. I'll be building this example soon 🤞
from mobx.dart.
Great. It works now.. Once I am able to achive all my use cases, I will create an example repo for reference to other users.
from mobx.dart.
Great idea. Feel free to send a PR. I'll try to get to it next week. Want to get some docs done before that.
from mobx.dart.
from mobx.dart.
I wonder if it's an opportunity to make something that convert Streams to disposable Observables.
That would definitely reduce the boilerplate of dealing with subscriptions.
from mobx.dart.
Totally, we could have an ObservableStream wrapper that is Firestore aware. Once we get into it we can build that up.
from mobx.dart.
Please let me know if I can be of any use on testing this feature.
from mobx.dart.
How to create AsyncActions lol???
from mobx.dart.
@DeepStyles You can mark an async method with @action
and return a Future
from it. That will give you an action containing async code. Note that actions are never async. They always mutate the observables synchronously. You are technically interleaving the async operations within. At the end of the operation you want to update some observable, which is always done synchronously. Hope that clarifies.
from mobx.dart.
Do you ming providing a simple FireStore example? We can implement in our project and provide feedback so that it would be easy to improve the example.. I am dying to use MobX in my project. I am holding it just for this example.
from mobx.dart.
when I do tht, codegen throws me Remove async modifier from methods error.
from mobx.dart.
Please share the code snippet @DeepStyles.
from mobx.dart.
just created simple example for posting here facing same error.
@action
Future googleLogin() async {
Future.delayed(Duration(milliseconds: 250), () {
loginStatus = ObservableFuture.value(true);
});
return await Future.value(true);
}
from mobx.dart.
@DeepStyles could you be using some old version of mobx_codegen? Async actions have been supported for a while now.
from mobx.dart.
I wonder if it's an opportunity to make something that convert Streams to disposable Observables.
That would definitely reduce the boilerplate of dealing with subscriptions.
Marking a method returning a Stream<T>
with @observable
makes the method return an ObservableStream<T>
which subscribes when a reaction starts observing it's value, and pauses if there are no subscribers. Pausing might be a problem if the Firebase Streams just begin to buffer data when paused though...
from mobx.dart.
I was gonna use AsyncAction, annotation doesnt exist for it and I m little confused about AsyncAction() doesnt take any fn() as argument, I havnt found any examples on repo either. ( I think m using latest mobx_codegen)
from mobx.dart.
With codegen you can just use @action
on a Future returning method to make it an async action.
@pavanpodila do you know if the async action codegen is released to pub?
from mobx.dart.
Yup it was already published. Now with 0.0.10, it also contains the fix for the recently reported bug with type parameters (#118).
https://pub.dartlang.org/packages/mobx_codegen
from mobx.dart.
Thanks guys its working now for me updated codegen!!!! I m working on Firestore example might update here once I complete it.
from mobx.dart.
from mobx.dart.
Setting p Firestore is your work, hopefully guessing u hav some experience adding Firestore app to Flutter project.
from mobx.dart.
Thanks. It helps.. Can Action methods be async ?
from mobx.dart.
ya thts how I worked it out instead f using Asyncactions(I hav no idea how to use Asyncactions)
from mobx.dart.
@pavanpodila I have the below code. The usersList
is always empty although the FireStore documents length is not 0. What is wrong in the code?
import 'package:blood_donation/model/user.dart';
import 'package:mobx/mobx.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
part 'users_list.g.dart';
class UsersList = UsersListBase with _$UsersList;
abstract class UsersListBase implements Store {
final CollectionReference firestore = Firestore.instance.collection('users');
@observable
ObservableFuture<List<User>> usersList =
ObservableFuture<List<User>>.value([]);
@action
Future<bool> getUsers() {
_fetchNewsList().then((List<User> data) {
usersList.value.addAll(data);
});
return Future.value(true);
}
Future<List<User>> _fetchNewsList() async {
final QuerySnapshot snapshot = await firestore.getDocuments();
List<User> users = [];
snapshot.documents.forEach((DocumentSnapshot doc) {
print(doc.data);
users.add(User.fromJson(doc.data));
});
return users;
}
}
I don\t want to just replace the usersList list with the new data. Whenever the new data is fetched it should be added to the list as it can be used for pagination.
from mobx.dart.
@action
Future getUsers() {
_fetchNewsList().then((List<User> data) {
usersList.value.addAll(data); // Try usersList = ObservableFuture<List<User>>.value(data);
});
return Future.value(true);
}
try above line changed and use usersList.value in Listview widget(if its not already)
from mobx.dart.
I suggest you use an ObservableList
to keep track of the users. Use a separate ObservableFuture
to track the progress of the fetch.
from mobx.dart.
I tried ObservableList too. In almost all cases, I get the below exception.
E/flutter (10381): [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: Instance of 'MobXException'
E/flutter (10381): #0 ReactiveContext.checkIfStateModificationsAreAllowed (file:///C:/Framework/flutter/.pub-cache/hosted/pub.dartlang.org/mobx-0.1.0/lib/src/core/context.dart:145:11)
E/flutter (10381): #1 ObservableList.addAll (file:///C:/Framework/flutter/.pub-cache/hosted/pub.dartlang.org/mobx-0.1.0/lib/src/api/observable_collections/observable_list.dart:98:14)
E/flutter (10381): #2 UsersListBase.getUsers.<anonymous closure> (package:blood_donation/state/users_list.dart:20:17)
E/flutter (10381): #3 _rootRunUnary (dart:async/zone.dart:1132:38)
E/flutter (10381): #4 _CustomZone.runUnary (dart:async/zone.dart:1029:19)
E/flutter (10381): #5 _FutureListener.handleValue (dart:async/future_impl.dart:126:18)
E/flutter (10381): #6 Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:639:45)
E/flutter (10381): #7 Future._propagateToListeners (dart:async/future_impl.dart:668:32)
E/flutter (10381): #8 Future._complete (dart:async/future_impl.dart:473:7)
E/flutter (10381): #9 _SyncCompleter.complete (dart:async/future_impl.dart:51:12)
E/flutter (10381): #10 _AsyncAwaitCompleter.complete (dart:async/runtime/libasync_patch.dart:28:18)
E/flutter (10381): #11 _completeOnAsyncReturn (dart:async/runtime/libasync_patch.dart:294:13)
E/flutter (10381): #12 UsersListBase._fetchNewsList (package:blood_donation/state/users_list.dart)
E/flutter (10381): <asynchronous suspension>
E/flutter (10381): #13 UsersListBase.getUsers (package:blood_donation/state/users_list.dart:19:5)
E/flutter (10381): #14 UsersList.getUsers (file:///D:/02_Projects/01-Flutter/blood_donation/lib/state/users_list.g.dart:34:20)
E/flutter (10381): #15 DashboardPage.build (package:blood_donation/pages/dashboard_page.dart:14:15)
E/flutter (10381): #16 StatelessElement.build (package:flutter/src/widgets/framework.dart:3789:28)
E/flutter (10381): #17 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3736:15)
E/flutter (10381): #18 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
E/flutter (10381): #19 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
E/flutter (10381): #20 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
E/flutter (10381): #21 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
E/flutter (10381): #22 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
E/flutter (10381): #23 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
E/flutter (10381): #24 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
E/flutter (10381): #25 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
E/flutter (10381): #26 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11)
E/flutter (10381): #27 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
E/flutter (10381): #28 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
E/flutter (10381): #29 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
E/flutter (10381): #30 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
E/flutter (10381): #31 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
E/flutter (10381): #32 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
E/flutter (10381): #33 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
E/flutter (10381): #34 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
E/flutter (10381): #35 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
E/flutter (10381): #36 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
E/flutter (10381): #37 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
E/flutter (10381): #38 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5)
E/flutter (10381): #39 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5)
E/flutter (10381): #40 ParentDataElement.mount (package:flutter/src/widgets/framework.dart:4063:11)
E/flutter (10381): #41 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
E/flutter (10381): #42 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4982:32)
E/flutter (10381): #43 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14)
E/flutter (10381): #44 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12)
E/flutter (10381): #45 ComponentElement.p
from mobx.dart.
I think you need to wrap your Observable changes inside a runInAction()
from mobx.dart.
Hi again.. Need your suggestions on the below question.
Let's assume the requirement that I need to fetch
- List of active blog post
- List of blog posts by user id
- List of blog post by category and many such criterias.
These requests should also support pagination.
Question: should I create new Store class for each of these Firebase query type? Or all can be accomodated by a single Store having different actions? Any sample reference would be help.
from mobx.dart.
In my app I just implemented all firestore related code in 1 store.
from mobx.dart.
@DeepStyles Your repo has single store which does a simple query.
@pavanpodila Please share your thoughts on this.
from mobx.dart.
@Purus I think you should be fine keeping a single ObservableList<BlogPost>
under one BlogPostStore
. The various criteria is just helping in fetching this list. If you are accepting the criteria from the user, you can make it observable for interactive editing.
So short answer, you should be fine with a single store in this case
from mobx.dart.
But how it can work when the filtering criteria is all different and when using paging? I am finding it hard to visualize this logic.
from mobx.dart.
The state that you are showing on the screen is always a list of posts. There are various action methods that are being invoked to filter/page etc. So you can capture the state with a single store and invoke a variety of action methods (filter, sort, group, page, etc) to modify this list of posts. Hope that helps.
from mobx.dart.
I have started using BLoC as I could not find good docs to refer on MobX (with Firebase). Please consider this issue as closed.
from mobx.dart.
No worries. I'll keep this open so that we address it soon enough.
from mobx.dart.
Friendly ping to know about this..
from mobx.dart.
Any updates on this? It's been a while since any discussion has happened and there still aren't examples that I could find.
from mobx.dart.
Related Issues (20)
- Unable to use MultiReactionBuilder HOT 3
- [question] when is it mandatory to use runInAction
- Issue In ObservableList while using addAll method with iterables.
- Feature request: static analysis for empty `Observer`
- [Codegen] name used in generated mixin has to be constant to reduce compiled app size (especially important for Flutter Web) HOT 1
- [Question] No observables detected when checking in a ternary operator inside of a child parameter HOT 1
- Make the Observer to rebuild when no changes in immediate context HOT 2
- `ObservableSet` and `ObservableMap` notify all listeners when one is added with `fireImmediately: true`
- Observer widget doesnt observe the new state (Flutter web)
- late reactions not working HOT 5
- Error happened when building Observer, but it was captured since disableErrorBoundaries==true HOT 1
- Computeds not working when Observer in Observer HOT 6
- Can't use nullable type alias in computed; `null check operator used on null value` HOT 2
- ObservableMap not notifying Observer mobx 2.2.3 it was woking fine in 2.2.1 HOT 6
- feat: add requiresReaction to `Computed`
- feat: add keepAlive to Computed
- feat: add scheduler option to autorun and reaction HOT 1
- feat: add signal option to reactions
- How to wait ObservableFuture.status in function?
- testWidgets with Store not working properly HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mobx.dart.