Skip to main content
Module

x/valtio/docs/how-tos/how-to-organize-actions.mdx

πŸ’Š Valtio makes proxy-state simple for React and Vanilla
Go to Latest
File
---title: 'How to organize actions'---
# How to organize actions
Valtio is unopinionated about organizing actions.Here's some recipes to show various patterns are possible.
## Action functions defined in module
**_Note_ This way is preferred as it is better for code splitting.**
```jsimport { proxy } from 'valtio'
export const state = proxy({ count: 0, name: 'foo',})
export const inc = () => { ++state.count}
export const setName = (name) => { state.name = name}```
## Action object defined in module
```jsimport { proxy } from 'valtio'
export const state = proxy({ count: 0, name: 'foo',})
export const actions = { inc: () => { ++state.count }, setName: (name) => { state.name = name },}```
## Action methods defined in state
```jsexport const state = proxy({ count: 0, name: 'foo', inc: () => { ++state.count }, setName: (name) => { state.name = name },})```
## Action methods using `this`
```jsexport const state = proxy({ count: 0, name: 'foo', inc() { ++this.count }, setName(name) { this.name = name },})```
## Using class
```jsclass State { count = 0 name = 'foo' inc() { ++this.count } setName(name) { this.name = name }}
export const state = proxy(new State())```