Fluxor not working in components lifecycle events

[mohaaron]

I have two different layout components that inherit from MyLayoutComponentBase : FluxorLayout class and both of them are not loading saved state that non layout components are loading correctly. I'm really not sure what to do to get it to work. I've tried overriding the OnInitialized and calling base.OnInitialized but no matter what I've tried nothing works. The only thing I can think of that might be an issue is that they are using TelerikRootComponent that wraps the @Body. I will be writing a support ticket to Telerik to explore this as a possible problem. If anyone here has any ideas please let me know.

[mrpmorris]

I'd be happy to pair with you on a Saturday or Sunday to track down the problem!

[mohaaron]

@mrpmorris I think maybe the problem I'm having is that I expected I would be able to use the state object inside of a components lifecycle method. It appears from some testing that I can only access the state inside the AfterRender methods. I wanted to do the following so that I can use the PK of an object being stored in state to call a Web API passing the PK value.

protected override async Task OnInitializedAsync()
{
    await base.OnInitializedAsync();
    if (AuthenticatedUser.Value.Loaded)
    {
        var userId = AuthenticatedUser.Value.Id; // Doesn't work
        // Now pass the userId to a call to web api
    }
}

[mrpmorris]

When the app starts up the store is not initialised (activated) until after the first render, so it can execute any JS plugins etc to talk to ReduxDevTools or whatever.

[mohaaron]

Ok, knowing that helps a little. I'm working on adding this to a Github demo project I have so that you can see what I'm doing.

[mohaaron]

@mrpmorris I now have an updated demo project here https://github.com/mohaaron/Syncfusion.Blazor.Demo that has code in the Index.razor file testing which lifecycle methods I can access state from. I was surprised that I was able to access state in the OnParameterSet(Async) methods. Now I see why, based on what you said, this works in child components and doesn't work in routed components. It appears that this is based on the timing of when components have finished their lifecycle.

Would I be correct in saying that the OnAfterRender events are the only truly safe place to access state?

You can see in the OnInitializedAsync that I would like to be able to get the state object and use the Id to pass it to a service that calls the database. I would also like to be able to access the state objects in lifecycle methods touse them for business logic.

[mohaaron]

When the app starts up the store is not initialised (activated) until after the first render, so it can execute any JS plugins etc to talk to ReduxDevTools or whatever.

Can this be changed so that Fluxor state can be used in the lifecycle methods? This is a significant handicap to me and I am now using state services in many cases instead of Fluxor due to this issue. Maybe what I want to do is an incorrect usage of Fluxor.

[mrpmorris]

You don't need to use StoreInitializer at all.

You can inject IStore anywhere you want (e.g. in app.razor) and call initialise yourself.

[mohaaron]

I finally got around to making this work in the linked demo project from earlier. The index page now has an IState object that is usable in the lifecycle methods. Thank you for the feedback @mrpmorris!