![\"wohoox\"](\"../../wohoox.png\")
\n\n \n
\n English | 中文\n
\n\n- Lightweight and reactive state management\n- Map, Set, WeakMap, WeakSet support\n- Typescript support\n- Plugins api support\n\n## Required\n\n- browser: only supports browsers with [native ES2015 support](https://caniuse.com/es6)\n\n## Install\n\n```bash\nnpm install -S wohoox\n```\n\n## Quick Start\n\n1. create a store\n\n```typescript\n/**\n * src/store.ts\n */\nimport createStore from 'wohoox'\n\nconst store = createStore({\n initState: {\n version: '1.x',\n details: {\n name: 'wohoox',\n other: 'xxx',\n },\n },\n actions: {\n updateVersion(state, version: string) {\n state.version = version\n },\n },\n})\n\nexport default store\n```\n\n2. use state\n\n```jsx\n/**\n * src/pages/example.tsx\n */\nimport store from 'src/store.ts'\n\nfunction Example() {\n return (\n\n \n
\n English | 中文\n
\n\n- Lightweight and reactive state management\n- Map, Set, WeakMap, WeakSet support\n- Typescript support\n- Plugins api support\n\n## Required\n\n- browser: only supports browsers with [native ES2015 support](https://caniuse.com/es6)\n\n## Install\n\n```bash\nnpm install -S wohoox\n```\n\n## Quick Start\n\n1. create a store\n\n```typescript\n/**\n * src/store.ts\n */\nimport createStore from 'wohoox'\n\nconst store = createStore({\n initState: {\n version: '1.x',\n details: {\n name: 'wohoox',\n other: 'xxx',\n },\n },\n actions: {\n updateVersion(state, version: string) {\n state.version = version\n },\n },\n})\n\nexport default store\n```\n\n2. use state\n\n```jsx\n/**\n * src/pages/example.tsx\n */\nimport store from 'src/store.ts'\n\nfunction Example() {\n return (\n\n \n
\n English | 中文\n
\n\n- Lightweight and reactive state management\n- Map, Set, WeakMap, WeakSet support\n- Typescript support\n- Plugins api support\n\n## Required\n\n- browser: only supports browsers with [native ES2015 support](https://caniuse.com/es6)\n\n## Install\n\n```bash\nnpm install -S wohoox\n```\n\n## Quick Start\n\n1. create a store\n\n```typescript\n/**\n * src/store.ts\n */\nimport { createStore } from 'wohoox'\n\nconst store = createStore({\n initState: {\n version: '1.x',\n details: {\n name: 'wohoox',\n other: 'xxx',\n },\n },\n actions: {\n updateVersion(state, version: string) {\n state.version = version\n },\n },\n})\n\nexport default store\n```\n\n2. use state\n\n```jsx\n/**\n * src/pages/example.tsx\n */\nimport store from 'src/store.ts'\n\nfunction Example() {\n return (\n\n \n
\n English | 中文\n
\n\n- Lightweight and reactive state management\n- Map, Set, WeakMap, WeakSet support\n- Typescript support\n- Plugins api support\n\n## Required\n\n- browser: only supports browsers with [native ES2015 support](https://caniuse.com/es6)\n\n## Install\n\n```bash\nnpm install -S wohoox\n```\n\n## Quick Start\n\n1. create a store\n\n```typescript\n/**\n * src/store.ts\n */\nimport { createStore } from 'wohoox'\n\nconst store = createStore({\n initState: {\n version: '1.x',\n details: {\n name: 'wohoox',\n other: 'xxx',\n },\n },\n actions: {\n updateVersion(state, version: string) {\n state.version = version\n },\n },\n})\n\nexport default store\n```\n\n2. use state\n\n```jsx\n/**\n * src/pages/example.tsx\n */\nimport store from 'src/store.ts'\n\nfunction Example() {\n return (\n\n \n
\n English | 中文\n
\n\n- Lightweight and reactive state management\n- Map, Set, WeakMap, WeakSet support\n- Typescript support\n- Plugins api support\n\n## Required\n\n- browser: only supports browsers with [native ES2015 support](https://caniuse.com/es6)\n\n## Install\n\n```bash\nnpm install -S wohoox\n```\n\n## Quick Start\n\n1. create a store\n\n```typescript\n/**\n * src/store.ts\n */\nimport { createStore } from 'wohoox'\n\nconst store = createStore({\n initState: {\n version: '1.x',\n details: {\n name: 'wohoox',\n other: 'xxx',\n },\n },\n actions: {\n updateVersion(state, version: string) {\n state.version = version\n },\n },\n})\n\nexport default store\n```\n\n2. use state\n\n```jsx\n/**\n * src/pages/example.tsx\n */\nimport store from 'src/store.ts'\n\nfunction Example() {\n return (\n\n \n
\n English | 中文\n
\n\n- Lightweight and reactive state management\n- Map, Set, WeakMap, WeakSet support\n- Typescript support\n- Plugins api support\n\n## Required\n\n- browser: only supports browsers with [native ES2015 support](https://caniuse.com/es6)\n\n## Install\n\n```bash\nnpm install -S wohoox\n```\n\n## Quick Start\n\n1. create a store\n\n```typescript\n/**\n * src/store.ts\n */\nimport { createStore } from 'wohoox'\n\nconst store = createStore({\n initState: {\n version: '2.x',\n details: {\n name: 'wohoox',\n other: 'xxx',\n },\n },\n actions: {\n updateVersion(state, version: string) {\n state.version = version\n },\n },\n})\n\nexport default store\n```\n\n2. use state\n\n```typescript\n/**\n * request.ts\n */\n\nimport store from 'src/store'\n\nconst { state, actions } = store\n\nfunction request() {\n // use state in other js/ts file\n return fetch(`/api/details?version=${state.version}`)\n}\n\nasync function getVersion() {\n const res = await fetch('/api/version')\n const { version } = await res.json()\n\n actions.updateVersion(version)\n}\n```\n\n## Advance\n\n### Key-Value by one action\n\n> It's common for an action to update one field. For example, `updateVersion` is used to update the `version`. `Redux` and `Mobx` are often used like this\n> `wohoox` also allows you to update by defining a common action, thus simplifying the definition of the action\n\n```typescript\n/**\n * src/store.ts\n */\n\nimport { createStore } from 'wohoox'\n\ntype RevertObjectToArrayUnion\n \n
\n English | 中文\n
\n\n- Lightweight and reactive state management\n- Map, Set, WeakMap, WeakSet support\n- Typescript support\n- Plugins api support\n\n## Required\n\n- browser: only supports browsers with [native ES2015 support](https://caniuse.com/es6)\n\n## Install\n\n```bash\nnpm install -S wohoox\n```\n\n## Quick Start\n\n1. Create store\n\n```typescript\n/**\n * src/store.ts\n */\nimport { createStore } from 'wohoox'\n\nconst store = createStore({\n initState: {\n version: '2.x',\n details: {\n name: 'wohoox',\n other: 'xxx',\n },\n },\n})\n\nexport default store\n```\n\n2. Use state\n\n```typescript\n/**\n * request.ts\n */\n\nimport store from 'src/store'\n\nconst { state, actions } = store\n\nfunction request() {\n // 使用 state\n return fetch(`/api/details?version=${state.version}`)\n}\n\nasync function getVersion() {\n const res = await fetch('/api/version')\n const { version } = await res.json()\n\n console.log(version)\n}\n```\n\n3. Update state\n\n`wohoox` updates state by `action`. This will make the state changes more controllable and trackable\n\n```typescript\n/**\n * src/store.ts\n */\nimport { createStore } from 'wohoox'\n\nconst store = createStore({\n initState: {...},\n // init actions\n actions: {\n updateVersion(state, version: string) {\n state.version = version\n },\n updateDetailsName(state, name: string) {\n state.details.name = name;\n }\n updateDetails(state, details: typeof state.details) {\n state.details = details\n }\n },\n})\n\nexport default store\n```\n\n```typescript\n/**\n * request.ts\n */\n\nimport store from 'src/store'\n\nconst { state, actions } = store\n\nfunction request() {\n return fetch(`/api/details?version=${state.version}`)\n}\n\nasync function getVersion() {\n const res = await fetch('/api/version')\n const { version, details } = await res.json()\n\n // update version by action\n actions.updateVersion(version)\n console.log(state.version)\n\n // update the object\n actions.updateDetails(details)\n console.log(state.details)\n\n // update the deep field\n actions.updateDetailsName(details.name)\n console.log(state.details)\n}\n```\n\n## Advance\n\n### Key-Value by one action\n\n> It's common for an action to update one field. For example, `updateVersion` is used to update the `version`. `Redux` and `Mobx` are often used like this\n> `wohoox` also allows you to update by defining a common action, thus simplifying the definition of the action\n\n```typescript\n/**\n * src/store.ts\n */\n\nimport { createStore } from 'wohoox'\n\ntype RevertObjectToArrayUnion