Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/away0x/aw-react-store
react state management
https://github.com/away0x/aw-react-store
hooks react state-management store typescript unstated
Last synced: 6 days ago
JSON representation
react state management
- Host: GitHub
- URL: https://github.com/away0x/aw-react-store
- Owner: Away0x
- Created: 2019-08-06T05:53:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T07:50:28.000Z (almost 2 years ago)
- Last Synced: 2024-10-04T21:04:26.998Z (about 1 month ago)
- Topics: hooks, react, state-management, store, typescript, unstated
- Language: TypeScript
- Homepage:
- Size: 3.23 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# aw-react-store
> 基于 [unstated-next](https://github.com/jamiebuilds/unstated-next) 做了一些拓展
## Install
```bash
yarn add aw-react-store
or
npm install --save aw-react-store
```
## Example
### Store
```typescript
import { useState, useCallback } from 'react';
import { BaseValue, createStore } from 'aw-react-store';
interface State {
count: number;
}
const initialState: State = {
count: 0,
}
export interface CounterValue extends BaseValue {
// actions
decrementAction: () => void;
incrementAction: () => void;
}
function useConter(): CounterValue {
const [state, setState] = useState(initialState);
return {
state,
// actions
decrementAction: useCallback(() => {
setState((s) => ({ ...s, count: s.count - 1 }));
}, []),
incrementAction: useCallback(() => {
setState((s) => ({ ...s, count: s.count + 1 }));
}, []),
};
}
export default createStore(useConter);
```
### Provider
```typescript
import React from 'react';
import ReactDOM from 'react-dom';
import { withStoreProviders } from 'aw-react-store';
import CounterStore from './store';
const App = withStoreProviders(Counter, [CounterStore]);
```
or
```typescript
import React from 'react';
import ReactDOM from 'react-dom';
import CounterStore from './store';
const App = () => (
);
```
### Function Component use
```typescript
import React from 'react';
import ReactDOM from 'react-dom';
import CounterStore from './store';
const Counter: React.FC = () => {
const store = CounterStore.useStore();
return (
-
{store.state.count}
+
);
}
```
### Class Component use
```typescript
import React from 'react';
import ReactDOM from 'react-dom';
import { HasStoreClassComponentProps, withStoreConsumer } from 'aw-react-store';
import CounterStore, { CounterValue } from './store';
const Counter = withStoreConsumer(class extends React.Component> {
render() {
const store = this.props.store;
return (
-
{store.state.count}
+
);
}
}, CounterStore);
```
or
```typescript
import React from 'react';
import ReactDOM from 'react-dom';
import { HasStoreMapClassComponentProps, withStoreMapConsumer } from 'aw-react-store';
import CounterStore, { CounterValue } from './store';
interface StoreMap {
counter: CounterValue;
}
const Counter = withStoreMapConsumer(class extends React.Component> {
render() {
const store = this.props.storeMap.counter;
return (
-
{store.state.count}
+
);
}
}, {
counter: CounterStore,
});
```