Can We Use Reducers to Manage Complex State Across All Pages, Particularly MarketDetails?

[pwdel]

MarketDetails.js as a whole has several pieces of complex state involved.

State includes:

market - Stores the market data fetched from the API. This is essential state.
currentProbability - Stores the latest probability to display.
chartData - Stores data for the probability chart.
numUsers - Number of users who bet on the market. Essential state.
totalVolume - Total amount bet on the market. Essential state.
creator - Information about the market creator.
betAmount - Stores user's bet amount. Essential for betting form.
showBetModal - Controls bet modal visibility. Essential for modal.
selectedOutcome - Selected bet outcome. Essential for betting form.
bets - List of bets on the market. Essential state.
isActivityModalOpen - Controls activity modal visibility. Essential for modal.
activeTab - Currently selected tab in activity modal. Essential for modal.
showResolveModal - Controls resolve modal visibility. Essential for modal.
selectedResolution - Selected resolution for market. Essential for resolving.
resolutionPercentage - Percentage resolution. Essential for resolving.

Derive currentProbability, chartData, creator from market data instead of separate state
Move modal state (isActivityModalOpen, activeTab, showBetModal, showResolveModal) into separate ModalManager component
Use a reducer for managing modal state since there are multiple related states
Move bet amount state (betAmount, selectedOutcome) into separate BetForm component

Other ideas...

Can we use reducer functions to reduce complexity?

A reducer function accepts two parameters:

1. an objet or array that represents a given state.
2. an action that describes how you want to modify the state

The function returns a new copy of the state we pass to it.

• the action parameter can be whatever or an object with a string type attribute and a payload with additional information.

Examples shown from O'Reilly React Cookbook:

https://github.com/dogriffiths/ReactCookbook-source/tree/master/ch04-03-reducer-seq/src

[pwdel]

Feedback from @markokovac16 :

1. Separate as much of everything into utils so your components are not behemoths
2. A part of the reason they're so huge because you always check for tokens/username/whatever, every piece of data can be a part of the global state, React Query is perfect for this usecase as it comes in with a lot of built-in stuff, it reduces the network load and loading time because it caches data so it doesn't constantly fetch the same data
   That's something that's going to be hugely important considering you plan on a big user-base.

As soon as you're in a position when you pass props to every single component, you should consider a state manager

Especially if you pass the props down several levels, it makes it super hard to maintain and debug