Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/panghu-huang/react-store
React Hook for accessing state and dispatch
https://github.com/panghu-huang/react-store
Last synced: about 1 month ago
JSON representation
React Hook for accessing state and dispatch
- Host: GitHub
- URL: https://github.com/panghu-huang/react-store
- Owner: panghu-huang
- Created: 2019-03-13T10:48:14.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-09T07:09:06.000Z (over 4 years ago)
- Last Synced: 2024-10-28T17:26:07.500Z (2 months ago)
- Language: TypeScript
- Homepage:
- Size: 12.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Store
### 安装
```bash
$ yarn add @wokeyi/store
// or
$ npm install @wokeyi/store
```
### 示例
> src/store
```javascript
import { create } from '@wokeyi/store'
interface IState {
name: string
age: number
}
type ActionType = {
type: 'SET_NAME'
name: string
} | {
type: 'SET_AGE',
age: number
}
const reducer = (prevState: IState, action: ActionType): IState => {
switch (action.type) {
case 'SET_NAME':
return {
...prevState,
name: action.name,
}
case 'SET_AGE':
return {
...prevState,
age: action.age,
}
default:
return prevState
}
}
const { useStore, useDispatch, StoreProvider } = create(reducer, {
age: 0,
name: 'default name',
})
export {
useStore,
useDispatch,
StoreProvider,
}
```
> src/App.tsx
```javascript
import * as React from 'react'
import { StoreProvider } from 'src/store'
import Child from './Child'
const App = () => {
return (
)
}
export default App
```
> src/Child.tsx
``` javascript
import * as React from 'react'
import { useStore, useDispatch } from 'src/store'
const Child: React.FC = () => {
const store = useStore()
const dispatch = useDispatch()
const setAge = React.useCallback(() => {
dispatch({
type: 'SET_AGE',
age: store.age + 1,
})
}, [store.age])
return (
set age
)
};
export default Child
```