I have a React application with a rather large state. I have been using useState since the beginning, but it has grown a lot and suddenly there are almost 100 useState lines.
Now I think it is time to switch to useReducer (I know - I should have done this cleanup way earlier).
The states are a mix of simple booleans, numbers, strings, objects and arrays of objects (and nested objects), eg.
const [type, setArea] = useState<Area>(getDefaultArea());
const [items, setItems] = useState<Item[]>([]);
const [enabled, setEnabled] = useState(false);
...
How do I best organize these? Should I create 1 giant useReducer with everything? Or group the variables into multiple smaller useReducers? Should an array of objects have its own useReducer?
I have not used useReducer before, but I have read a bunch of articles, but they all walk through simple counter samples and does not really descripe how to organize a large state.
I'm also planning to move part of these into a context, but one step at a time.
If anybody can point me in the right direction, I will appreciate it very much.