Question about reducers

[pekeler]

First time user here. For my app, I basically have context with about 20 keys and a button that takes the user to the next state. Since reducers are part of the transition, I find it difficult to read and write the machine. I glance at a state and then need to remind myself that all this context stuff in that state is really for the transition to the next state, and then I need to think what my previous state might have been to figure out what the context of my state in question might look like.

The label of the button is one of the context values, and this makes it even more confusing to me because it's two states removed from the state it's named for. I glance at state foo and see a label "Transition to baz" and then wonder what happened to bar.

{
	state1: state(
		transition(
			'next', 'state2',
			reduce((ctx) => ({ ...ctx, actionTitle: 'Go to state 3' }))
		)
	),
	state2: state(
		transition(
			'next', 'state3',
			reduce((ctx) => ({ ...ctx, actionTitle: 'Go to state 4' }))
		)
	),
	state3: state(
		transition(
			'next', 'state4',
			reduce((ctx) => ({ ...ctx, actionTitle: 'Go to state 5' }))
		)
	)
}

I keep thinking that it'd be easier on me if the reducers belonged to the state instead of the transitions, like an entry to that state.

{
	state1: state(
		reduce((ctx) => ({ ...ctx, actionTitle: 'Go to state 2' })),
		transition('next', 'state2')
	),
	state2: state(
		reduce((ctx) => ({ ...ctx, actionTitle: 'Go to state 3' })),
		transition('next', 'state3')
	),
	state3: state(
		reduce((ctx) => ({ ...ctx, actionTitle: 'Go to state 4' })),
		transition('next', 'state4')
	)
}

Am I missing something or maybe abusing context for something it wasn't meant for?

[pekeler]

I have made the change of allowing state to have reducers to a fork and used it to implement a card game. I'm also using Mutative for the context/reducers (great fit!), and use the convention that only immediates are used to change the state while transitions never change state (so they're kinda creating substates).

I'm pleased with the result. The state machine for the game is about 700 lines of code and I find fairly easy to read and extend now because context values that are relevant to a state are only set by reducers in that state.

The app is Svelte and the UI is 100% driven by the machine's context. It feels like using Redux with the added structure of a state machine which is nice.

I think I can improve it further by renaming transition to handle and dropping the 2nd parameter (since the state remains the same), and renaming immediate to transition.

Anyways, this is just one use case. Feel free to close the issue.