Example usage of useReducer and useState

[kwnath]

So a bit of context, I’ve decided to reduce the reliance on mobx state tree as our app doesn’t necessarily require all its helper functions and a large majority of the tasks we do are essentially just syncing backend with frontend. During this transition I’ve pretty used SWR as my single source of truth and have been using context/providers to life state.

Mobx state tree allows me to model my nested objects (some more context, our app is essentially a livechat so there are many conversations, each conversation with an array of messages) and attach “actions” that in general give me an easier time to manipulate the store. And provides the team with a lower cost of entry in terms of getting started.

However my question is, how can I use useReducer, useState, other hooks to manipulate data in a more organised manner.

Currently this is what my context looks like:

const { 
   data: conversations, 
   mutate 
} = useSWR(...)

function addMessageToConversation(event) {
     mutate((convos) => {
         // Add the message to the current cache 
         // Roughly would be below, instead I should actually do shallow copying etc.
        return convos.map(c => {
             if(c.id === event.id) c.messages.push(event)
        }) 
    })
}

<ConversationsContext.Provider
   value={{
      addMessageToConversation,
      incrementUnreadCountToConversation,
      deleteMessageForConversation,
     // Etc more actions for conversations.
      conversations
   }}
>
{children}
</ConversationsContext.Provider>

With this implementation it seems a unmanageable as you can imagine the more actions the harder it is to read. I'm wondering if theres a way to useReducer and useState to organise this code better.