Installation

npm install xstate mutative xstate-mutative# Or use any package manager of your choice.

Usage

import{createMachine,interpret}from'xstate';import{assign,createUpdater}from'xstate-mutative';constlevelUpdater=createUpdater('UPDATE_LEVEL',(ctx,{ input})=>{ctx.level=input;});consttoggleMachine=createMachine({id:'toggle',context:{count:0,level:0,},initial:'inactive',states:{inactive:{on:{TOGGLE:{target:'active',// Immutably update context the same "mutable"// way as you would do with Mutative!actions:assign((ctx)=>ctx.count++),},},},active:{on:{TOGGLE:{target:'inactive',},// Use the updater for more convenience:[levelUpdater.type]:{actions:levelUpdater.action,},},},},});consttoggleService=interpret(toggleMachine).onTransition((state)=>{console.log(state.context);}).start();toggleService.send({type:'TOGGLE'});// { count: 1, level: 0 }toggleService.send(levelUpdater.update(9));// { count: 1, level: 9 }toggleService.send({type:'TOGGLE'});// { count: 2, level: 9 }toggleService.send(levelUpdater.update(-100));// Notice how the level is not updated in 'inactive' state:// { count: 2, level: 9 }

Mutative Options

Credits

License