How to organise UI state while thinking in terms of Fractals ? about appuity-frontend HOT 6 CLOSED

I used to put everything in global redux state, but with introduction of hooks, you can also use the setState hook.

My rule of thumb is to keep ui state as low in the component tree as possible.

from appuity-frontend.

@shivekkhurana got it.

But when we need to put some UI state into our redux, how can we think in a fractal way?

from appuity-frontend.

[For UI state management, I rely heavily on an in-house tool that I built, but for the sake of this question, I'm highlighting the idea behind that tool.]

When imagining Fractals, every component is a node on the tree. API state is not directly tied to a component and managed using modules. Suppose you have the following Fractal structure:

src/pages/Contacts.js
src/pages/contacts/List.js
src/pages/contacts/list/Row.js

Assume that /contacts is an api and CRUD is managed in the contacts module. Also assume that you have a checkbox next to every contact in the list to perform batch operations.

In this case, the lowest level at which the UI selected state can be stored is List.js (let me know if this is not evident).

Thinking Fractally, I'd introduce a new reducer with the key uiPagesContactsList. The ui prefix is for me to remember that this is a UI only reducer. And the name of the key is the path to the node (hence making it easy to reason). Since this is a module (referring to Fractal's naming conventions), I'd have a new folder modules/ui/pages/contacts/list.js. Same repeats for every other ui component that needs state.

In that article, I advocated for tree shaped redux stores, but it turns out that it's not a good idea and stores should be kept as flat as possible. Hence a flat key that represents structure : uiPagesContactsList.

Now the sheer number of folders you'd have to create for this is rather high. That's where my tool comes in. It's called keducer (Link to article on Keducer). It helps you achieve this shape without actually creating folders.

Please feel free to call out if I didn't make any sense.

from appuity-frontend.

@shivekkhurana 😱 thank your for your answer dude.

from appuity-frontend.

Was I able to answer your question?
Please let me know if it's safe to close this issue :)

from appuity-frontend.

Closing this. Feel free to reopen.
PS. It's a good idea for a blog post. Will write one soon.

from appuity-frontend.