https://github.com/tcly861204/react-pinia
🍍 Building a Minimal State Management for React
https://github.com/tcly861204/react-pinia
lib react react-dom react-pinia state store ts typescript vite
Last synced: about 1 year ago
JSON representation
🍍 Building a Minimal State Management for React
- Host: GitHub
- URL: https://github.com/tcly861204/react-pinia
- Owner: tcly861204
- Created: 2022-07-18T13:42:32.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-11-24T12:10:10.000Z (over 1 year ago)
- Last Synced: 2025-04-24T00:07:25.313Z (about 1 year ago)
- Topics: lib, react, react-dom, react-pinia, state, store, ts, typescript, vite
- Language: TypeScript
- Homepage: https://tcly861204.github.io/react-pinia/
- Size: 1.04 MB
- Stars: 9
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-pinia
🍍 Build minimal state management for React
## Installation
> npm i react-pinia
## Global Usage
Define data source
```ts
import { createStore } from 'react-pinia'
type HomeState = {
count: number
user: string
info: {
useName: string
password: string
}
getters: {
doubleCount: number
}
actions: {
add: (count: number) => void
}
}
type AboutState = {
num: number
}
export interface State {
home: HomeState
about: AboutState
}
const store = createStore({
home: {
state: () => {
return {
count: 1,
user: 'hello',
info: {
useName: 'admin',
password: '123456',
},
}
},
getters: {
doubleCount: (state) => {
return state.count * 2
},
},
actions: {
add(count) {
console.log(this.info)
// this.count += count
// this.info.useName = 'cobill'
this.info = {
useName: 'cobill',
password: '123456789',
}
// this.user = 'world'
},
},
deep: false,
},
about: {
state: () => {
return {
num: 1,
}
},
},
})
export default store
```
Global Mounting
```ts
import { Provider } from 'react-pinia'
import store from '@/store'
ReactDOM.render(
,
root
)
```
Global Usage
```ts
import { useStore } from 'react-pinia'
// Import globally defined types
import { State } from '@/store/global'
const App = memo(() => {
const home = useStore('home')! // Need to pass generics and assert
return (
count: {home.count}
doubleCount: {home.doubleCount}
{home.user}
Add
)
})
export default App
```
## Local Usage
Local usage does not require global mounting, just use it directly
```ts
// Define data source
import { defineStore } from 'react-pinia'
type State = {
count: number
user: string
getters: {
doubleCount: number
}
actions: {
add: () => void
}
}
const useStore = defineStore({
state: () => {
return {
count: 1,
user: 'hello',
}
},
getters: {
doubleCount: (state) => {
return state.count * 2
},
},
actions: {
add() {
this.count += 1
},
},
// Whether to persist data
persist: {
key: 'user',
storage: 'localStorage', // 'localStorage' | 'sessionStorage' default is localStorage
},
deet: true,
})
```
```ts
// Use data source
import { memo } from 'react'
import useStore from './useStore'
// Use directly outside
const state = useStore().get()
const Child = memo(() => {
const { count, doubleCount, add } = useStore()
const onClick = () => {
state.count = state.count + 1
}
return (
{count}
{doubleCount}
Add
Modify externally
)
})
export default Child
```
## Sponsored
Open source is not easy, with your sponsorship, we will do better 👋
## Technical feedback and communication
WeChat: cobill2008
## License
[MIT](http://opensource.org/licenses/MIT)