marcglasberg / async_redux

Flutter Package: A Redux version tailored for Flutter, which is easy to learn, to use, to test, and has no boilerplate. Allows for both sync and async reducers.
Other
230 stars 41 forks source link

Is there a full fledged example with a complete app showcasing the fundamentals and best practices described in the Readme? #97

Closed joanofdart closed 2 years ago

joanofdart commented 3 years ago

Hello!

I'm loving the documentation so far and I was wondering, apart from the single page examples you guys have, is there a full fledged example with a complete app (todos, firebase, w.e) with the fundamentals and best practices described in the readme?

Couldn't find anything anywhere.

catalunha commented 3 years ago

Hi, I have developed an academic and private application using AsyncRedux with firebase in Mobile and Web version and every day I find this library of Marcelo more fantastic. And look, I'm using 10% of it. But good practice is to mine the literature and optimize the code constantly.

joanofdart commented 3 years ago

@catalunha that's great to read! unfortunately, it doesn't answers my question unless you have a public repo about said projects.

marcglasberg commented 3 years ago

@joanofdart So far I've managed to create a very complete documentation, but I agree there's nothing like a good complete app example to help you get started. The documentation also assumes the reader knows vanilla Redux well, and doesn't explain the Redux concepts as it should. I have plans to tackle both of these shortcomings, and I have already started creating a more complete example, but so far I hadn't had the time to finish it.

Meanwhile, feel free to use this issue to ask any architecture questions you might have regarding AsyncRedux or Redux in general, and I'll answer them as promptly as I can.

joanofdart commented 3 years ago

Hello, Yeah unfortunately I'm a totally newbie to the Redux concept and even tho the documentation is, as you mentioned, amazingly complete, there are certain aspects which I don't really grasp yet. I guess that one of the brain scratches I had last night was about managing streams and futures. That section perhaps expects the reader to know redux and I was quite... lost. I'm also a bit deep in the ocean when it comes to manage the app state.

In my head, I think about this...

  1. App is created with the initial state
  2. If user is loggedIn, update the state with the new values. Else just show the initial state.
  3. As user interacts, update the state of the given section of an app and then push said state to the main one.

I'll be eager to check the example you're gonna be sharing! Hopefully that'd make it a bit easier or I could also go and learn redux 🤔

marcglasberg commented 3 years ago
  1. The app is created with the initial state, which by default is just a waiting screen.
  2. If user is logged in, load the saved information from the local persistence, or download it from your back end. Then update the state with this info, which will show the user the main app screen.
  3. If user is NOT logged in, update the state with this info, which will show the user the login screen.
  4. As user interacts, update the state to reflect the changes you want. You do that by returning an updated copy of the state from your reducers, changing only the part of the state you care about.

Yes, you really should go and learn Redux, because even an example app will not help you if you don't have the basics. Just read some Redux tutorials, even if they are for JavaScript.

flowme-develop commented 3 years ago

@marcglasberg congrats for the work! Excelent package async and the others also. Do you have a receipe for migrating a standard flutter redux project to your async version. Could the two coexist inside the same project?

marcglasberg commented 3 years ago

@flowme-develop Thanks, glad you like them.

I believe yes, they can coexist, but only independently, not sharing any state. To be honest, If I were you I would do it all at once.

To migrate from vanilla Redux to AsyncRedux you have to:

1) Put all sync reducers from vanilla Redux into AsyncRedux action reducers (sync reducers, that return AppState?).

2) Move async code from vanilla Redux middleware into AsyncRedux action reducers (async reducers, that return Future<AppState?>).

3) In the StoreConnectors you can use the converter parameter, at first, since that's similar to Vanilla Redux. Later you can migrate to the vm parameter, if you want.

gadfly361 commented 3 years ago

@flowme-develop Having migrated from vanilla redux to async_redux before, I recommend doing it all at once as well (it was pretty straightforward)

marcglasberg commented 2 years ago

@joanofdart Please visit the AsyncRedux Project Template repository in GitHub for a full fledged example with a complete app showcasing the fundamentals and best practices described in the Readme.

The code is mostly there, but I will now create a REAME explaining all the details. Thanks!

joanofdart commented 2 years ago

@marcglasberg why are you replying to me when this was created 2 years ago? Anyways, thanks? :)

marcglasberg commented 2 years ago

Better late than never!

ValeriusGC commented 2 years ago

@joanofdart Please visit the AsyncRedux](https://github.com/marcglasberg/async_redux_project_template%22%3EAsyncRedux) Project Template repository in GitHub for a full fledged example with a complete app showcasing the fundamentals and best practices described in the Readme.

The code is mostly there, but I will now create a REAME explaining all the details. Thanks!

The link is not valid.

marcglasberg commented 2 years ago

@ValeriusGC Yes, sorry, I renamed the repo and forgot to change it here. Please visit:

https://github.com/marcglasberg/redux_app_example

ValeriusGC commented 2 years ago

@ValeriusGC Yes, sorry, I renamed the repo and forgot to change it here. Please visit: https://github.com/marcglasberg/redux_app_example

Thanks. There are 2 questions, if you have time to answer, of course ) First: What is the goal of this part of code?

      closeKeyboardFunc: () {
        /// How to Dismiss the Keyboard in Flutter the Right Way.
        /// https://flutterigniter.com/dismiss-keyboard-form-lose-focus/
        SystemChannels.textInput.invokeMethod('TextInput.hide');
      },

As i tested it does nothing, no dismissing at all.

And last but The Main One. Are you (or somebody you know) applied such a way on a really huge project, on 100+ pages with appropriate quantity of business logic? And how it affected on AppState's size? And how about complexity in maintenance of this huge God Object? Is it real to painlessly develop such a projects with Redux/AsyncRedux? I'd like to try but afraid to stuck on halfway, 'cause our projects are pretty big.

Thanks beforehand.

marcglasberg commented 2 years ago

@ValeriusGC

The NavigateAction calls this (as long as the app is not configured to disable platform channels):

AppState? reduce() {
    if (!RunConfig.instance.disablePlatformChannels) _closeKeyboardFunction.call();
...

This means it will close the keyboard when you navigate between screens. For example, when you do dispatch(Navigate_Action.push(const Cache_Screen())

marcglasberg commented 2 years ago

@ValeriusGC

Are you (or somebody you know) applied such a way on a really huge project, on 100+ pages with appropriate quantity of business logic?

Yes, of course. I know many people, and I have myself applied it to 2 very large projects.

And how it affected on AppState's size?

The app state is just the info the app must have in memory to display the info it needs to display. It's going to be the same no matter the state management solution you use. And it's unlikely to be too large in any case.

And how about complexity in maintenance of this huge God Object?

The store is not a God object. It's just a repository where you can store the object you need, as the name says. Those should be as granular as necessary. Think of it as a namespace. There is no maintenance costs, because it has no logic, and you can just add or remove stuff as needed.

Is it real to painlessly develop such a projects with Redux/AsyncRedux? I'd like to try but afraid to stuck on halfway, 'cause our projects are pretty big.

AsyncRedux is actually based on the original flutter_redux. The whole idea of developing AsyncRedux was that, for me, flutter_redux alone was painful. Why? Because it is too flexible. It just gives you the core of Redux, but you still have to devise how your actions should work, how to wire things up, how to persist information, how to deal with widgets with internal state, how to run async processes etc. So AsyncRedux solves all that for you and also removes boilerplate.

Redux only works with immutable data. That's very good for large projects. When you go immutable, whole classes of problems just disappear. One difficulty with working with immutable data is collections. Making sure you keep your collection immutable can indeed be painful. That's why I developed a package of immutable collections: https://medium.com/flutter-community/announcing-fic-fast-immutable-collections-5eb091d1e31f

I'd say Redux is, by excellence, the state management solution for large projects, even though I tried, with AsyncRedux, to make it also good for small projects.

ValeriusGC commented 2 years ago

Thanks a lot for such a detailed response. I will definitely try.