Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Maxim Crabbé
    @MaximCrabbe
    I hope so, because 'we are not reading the state now', we are 'reading actions payload' :)
    if someone adds a new action to modify the form for example with a new button that launches an action he has to remember to add the actionsubscribe as well it is a smell :)
    Peter Morris
    @mrpmorris
    The server can return you an editable object in the API response.
    That is dispatched by the effect.
    The SubscribeToAction in the form simple sets MyModelToEdit = Action.Customer
    Then you can edit it in the form, it doesn't go into state
    Now, you can also reduce the values of Action.Customer into state if there are multiple pieces of state holding customer information so that, for example, fetching a Customer from the server with a name that has been updated will update existing state
    But your state is readonly
    SubscribeToAction is a shortcut
    Ordinarily you'd take the DTO from the API, reduce its values into state, and then the form would make a copy of that state into a mutable object
    but that's a lot of work
    Peter Morris
    @mrpmorris
    The other way I have seen it done is the form calls the API itself
    I'm not so keen on that
    Maxim Crabbé
    @MaximCrabbe

    Ordinarily you'd take the DTO from the API, reduce its values into state, and then the form would make a copy of that state into a mutable object

    The first part I understand, reducing the values into the state, but how do I make a copy of the state into a mutable object in the component?

    Peter Morris
    @mrpmorris
    AutoMapper would be one way, but I wouldn't store the object I at all
    Either do the api calls in your app and only reduce results, or ( I recommend) use the action subscriber to grab the mutable DTO from the server and don't let it go into state
    Alexander Gnauck
    @agnauck
    just found this channel after I posted a new issue with a question here:
    mrpmorris/Fluxor#157
    Peter Morris
    @mrpmorris
    Are you saying you are updating the state but the UI isn't updating? I didn't quite understand the end
    Alexander Gnauck
    @agnauck

    assume I have a state with with a huge array of trades (1000+). The UI is build out of many Fluxorcomponents. All of those components show lists which are build from subsets of the state array.
    eg:

    • List of trades for Apple stock
    • List of trades for Microsoft stock

    When I insert a new trades to the array in the state for performance reasons only affected components should be updated.
    Or is this nothing I should be concerned about?

    My assumption is that FluxorComponent calls StateHasChanged in any coponent, also when the add or insert does not affect this component. But I can be wrong. Still studying the code. My concern would be performance in a high traffic realtime application
    Peter Morris
    @mrpmorris
    When you subscribe to state X then your component will re-render whenever that state changes regardless of which part changes
    Alexander Gnauck
    @agnauck
    Is there a sample somewhere on how to do that?
    Peter Morris
    @mrpmorris
    Descend from FluxorComponent and it will automatically subscribe to and unsubscribe from any IState<T> properties your component has
    Hoang Do Van
    @hoangdovan
    @mrpmorris Can we know when lazy loading support is ready with Fluxor?
    Peter Morris
    @mrpmorris
    I abandoned it. The new effects' dependencies cannot be registered
    The ticket is marked Won't Do, with an explanation
    Hoang Do Van
    @hoangdovan
    @mrpmorris Thank you for your answer. But can you suggest any workaround for this problem? Because if lazy loading is not supported, then the bundle size will be get bigger. Coming from Angular with Ngrx, I see this is important feature!
    Peter Morris
    @mrpmorris
    It could be done on condition that any dependencies the effects need must be registered by the main app
    So only states + effects + actions could be in the satellite assemblies and not services
    Peter Morris
    @mrpmorris
    Any admin specific services would need to be in your main assembly - which means any actions they consume would need to be there too
    So you are starting to tie them in to the main download
    @hoangdovan what kind of size difference are you seeing?
    I see that a standard (empty) NetStandard2.0 dll is 3.5KB
    Peter Morris
    @mrpmorris
    Adding a large state class + 20 actions costs an additional 10240 bytes (exactly 10 kb)
    Peter Morris
    @mrpmorris
    Which brotli compressed down to 3k
    So yeah, I'd like to know the size of your dlls please
    Hoang Do Van
    @hoangdovan
    @mrpmorris Thank you so much! We just want to evaluate Blazor for future projects. Yes, you're right, the dll in most case is not so big. The bundle size is just one reason, another reason is separation of concern, we don't want to add everything in main class. Currently we use Angular & Ngrx, and lazy load everything is our standard. Thank for your explanation!
    Peter Morris
    @mrpmorris
    You can have them in different dlls
    That's fine, you can tell Fluxor to scan multiple assemblies, not just one
    Although my gut says only separate out effects + states
    have a single shared DLL for all the actions. That way all reducers can react to all actions that should affect their state
    Alexander Gnauck
    @agnauck
    @mrpmorris I think I was pretty bad in explaining my use case. Right now I am working on some POC, and coming from the Vue, React and WPF world. I was drawing a small diagram and hope this helps to explain it
    image.png
    Haytam Zanid
    @zHaytam
    All components will get rerendered
    Alexander Gnauck
    @agnauck
    In Vue (Vuex) from example you have getters which are using filters to narrow down your data. And the getters are smart enough to figure out whether an updates affects them or not. And only call a render when they are affected
    @zHaytam thanks, this was my assumption, and trying to find a way to prevent this. I assume those renders will cause performance bottlenecks later in a highly reactive website with lots of changes to the data
    Peter Morris
    @mrpmorris
    Steps to avoid this
    1: Don't descend from FluxorComponent (which re-renders if any of your IState<T> changes)
    2: Call the Subscribe method on your IState<T> property in OnInitialized
    3: Implement IDisposable so you can unsubscribe from the IState<T> (avoid memory leaks)
    So now you have the ability to decide if the component should re-render or not
    When the subscription triggers, check if last value != new value. If that is the case then call StateHasChanged
    I would use a ReadOnlyDictionary<string, whatever> in the state so I can do an immediate lookup of the data you want, rather than doing a sequential scan of the data with LINQ's .Where
    If you use the new record in C# 9 for all your state then object equality is done for you for free
    Alexander Gnauck
    @agnauck
    @mrpmorris thanks. Do you think I can combine Fluxor with ReactiveUI and DynamicData to achieve this?