Add Componentization / State Management

[JamesKEbert]

As a developer I want the capability to use aries-mobile-agent-react-native in an existing project and to be able to receive new updates and push additions back. We need to add componentization or state management to enable this functionality.

The intent is to create a set of core components or state to allow a developer to use default UI components or have the necessary tools to display and interact with the framework and data.

[JamesKEbert]

@NeilSMyers, would you be able to outline your approach to state management for Aries Bifold for using Aries Framework Javascript that you were proposing on the user group call yesterday?

@karimStekelenburg your thoughts here could also be useful. We'd like to help/get moving on this very rapidly.

[NeilSMyers]

After talking it over with James, I'm realizing my mental model for this problem is all out of wack. So I'm all in to help out however I can on whatever solution we can work on together

[TimoGlastra]

@karimStekelenburg can you take a look and coordinate with @NeilSMyers and @JamesKEbert?

[karimStekelenburg]

Sure! I'll give my thoughts on this here.

I've looked into React Query, but from what I understand it serves another purpose. As the Agent class lives on the client-side, I think a client-side state management tool like Redux is a good fit. The reason for researching Redux is because it's able to run in pure JS, NodeJS, React, React-Native, etc. Another plus from my perspective is that Redux is a fairly popular framework, thus it should be familiar to a good amount of developers.

Redux Toolkit

My idea is to use Redux Toolkit, which is an official and opinionated tool-set for Redux that offers some handy features. On of them being slices, which would allow us to neatly organize parts of the store (e.g. connections, credentials, etc.).

Initialization challenge

One of the difficulties I've encountered is that the Agent needs to be initialized before it will be able to be used (await agent.init()) needs to be called. Since the Redux state is synchronous, this is a bit of a pain. An option to get around this is to check if the agent is initialized before every call to the store and call await agent.init() if this isn't the case. However, these 'guard statements` create quite some overhead that might not be necessary.

I'm currently looking into solving this issue by using enhancers. These allow you to add things to the store asynchronously before an action is dispatched on the store.

Thoughts?

I've worked with Redux before, but I'm certainly not an expert. Do you have any thoughts on this approach @JamesKEbert, @NeilSMyers and @TimoGlastra? I'd be more than happy to change course if there is a better alternative.

I'll move forward with my attempts regarding the enhancer in the coming days. However, I suggest that if everyone agrees on using Redux and this approach doesn't workout right off the bat, we'll go with the 'guard statement` solution for now and perfect it later on :)

[NeilSMyers]

I read up on those things, it looks good to me! I'd love to pair program with you on it so we can get on the same page for code patterns

[JamesKEbert]

Thank you for you thoughts here @karimStekelenburg! I second @NeilSMyers's thoughts on pair programing or hopping on a call at some point--wondering if it'd be helpful for that effort to commit/set up some of the directories in this repo sooner?

I think using Redux Toolkit is a good approach here. I am open to additional options as well, but I think you've done the most research/thought into this so far and this looks like a good approach I think.

I did a little digging on the async problems--in a similar camp to the enhancers solution, wondering if utilizing some redux async middleware could be effective? Essentially could be a way of doing the 'guard statements' under-the-hood too.

I think there might be some different challenges, but we could be able to do the agent.init() prior to the storage in the store. This would allow us to do the agent.init() async portions prior to use with redux. Not sure if this is a good approach, just another idea though.

[karimStekelenburg]

Allllright then! I agree with the pair-programming approach as well. I think a call to get aligned and kick things off is a solid idea too. I'm not sure if this is the right place to make appointments however 😅. @JamesKEbert, could you send me an email (karim(at)animo(dot)id) and CC Neil? That way I have your email addresses and we can schedule a call asap to get things going 👏

[NeilSMyers]

Basic set up of the state management is here https://github.com/hyperledger/aries-mobile-agent-react-native/tree/feature/stateManagement in the aries-components folder

[karimStekelenburg]

Sorry guys, it took me a bit longer than expected... I'm working on some final beauty fixes, but then we'll have the connection slice fully implemented. I still have to figure out how to do the unit testing properly, but I'll push it without the tests so you guys can have a look at the setup.

I'm out of office the coming two days, but I'll make sure to have it ready before our call on Wednesday, so we can discuss.

@JamesKEbert @NeilSMyers

[karimStekelenburg]

Alright peoplez! I've changed the structure and added some selectors. Sadly my lazy test script (run.ts) stopped working because I needed to add react-redux as a dependency in order to create the selectors. As react-redux requires react-dom, it doesn't simply work in NodeJS anymore without adding some react mocking dependencies. I'm skipping that for now because I'm gonna write some proper unit-testing next anyway, so it would be a bit useless.

I'll try to get the unit-tests out of the way ASAP, so we have a fully working and tested slice as a reference for the rest of the slices.

@NeilSMyers and @JamesKEbert, what slices are you planning to pick up? I was planning to do credentials and proofs next, because we need it in some other projects as well.

Have a nice weekend!

[jleach]

This issue will be addressed as part of the architecture changes coming to Bifold in 2023 as per the outcome of the summit. Stay tuned for new issues.