Let's say you have a tic-tac-toe app.
- There's the game state which can be represented by an array of size 9.
- There's your "reducer" computes new state from old state and player actions.
- Then there's your renderer which updates the UI based on the new state.
Great! Functional programming basics. Unfortunately, this is where most online resources end. They all talk about how to write logic in a pure manner, not having side-effects, not mutating data or reassigning values. What they don't expand a lot on is what happens next:
How new state is held by the app?
If I mark a cell on the board "X", the app takes my move, computes new state, re-renders the grid. But I cannot mutate the original array, nor can I assign it to the same variable. How does the app hold the new state?
How can rendering be pure in a web app?
If I mark a cell on the board "X", the app takes my move, computes new state, re-renders the grid. But to re-render the grid, I'd be manipulating the DOM, which is effectively mutating a data structure. How does one update the DOM functionally?
I come from a web dev background, where it's usually about waiting for events, mutating data and manipulating DOM - rarely any FP in sight. Also, most talk about holding state in the stack, usually in a form of recursion, which is not a thing in web apps. So I'm having a hard time wrapping my head around the concept, especially when materials describe patterns that are not applicable. Hints to the right direction is appreciated.